clusev/resources/views/mail/alert-html.blade.php

173 lines
11 KiB
PHP

@php
// All colors inline (email clients strip <style>): Clusev "Tactical Terminal" palette.
$void = '#0b0e13'; // outer background
$surface = '#12161d'; // card
$inset = '#0e1218'; // readout background
$line = '#232a35'; // hairline
$ink = '#e9eef3'; // primary text
$ink2 = '#aab4c0'; // secondary
$ink3 = '#77828f'; // muted
$accent = '#ff6a2b'; // signal orange
$online = '#35d07f';
$offline = '#ff5247';
$state = $resolved ? $online : $offline;
$stateTint = $resolved ? '#0f2a1d' : '#2a1214';
$stateLabel = $resolved ? __('alerts.mail_status_resolved') : __('alerts.mail_status_firing');
$when = ($resolved ? $incident->resolved_at : $incident->started_at) ?? now();
$mono = "'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono','Courier New',monospace";
$sans = "'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif";
$isOffline = $metric === 'offline';
$metricLabel = $isOffline ? __('alerts.metric_offline') : __('alerts.metric_'.$metric);
$valueText = $isOffline
? ($resolved ? __('alerts.mail_state_online') : __('alerts.mail_state_offline'))
: rtrim(rtrim(number_format((float) $value, 1, ',', '.'), '0'), ',').(in_array($metric, ['cpu', 'mem', 'disk'], true) ? ' %' : '');
$dashboardUrl = rtrim(config('app.url'), '/').'/alerts';
@endphp
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<meta name="supported-color-schemes" content="dark">
<title>{{ $stateLabel }} {{ $rule }}</title>
</head>
<body style="margin:0; padding:0; background-color:{{ $void }}; -webkit-text-size-adjust:100%;">
{{-- Preheader (inbox preview text, invisible in the mail body) --}}
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">
{{ $stateLabel }}: {{ $rule }} · {{ $server }} · {{ $when->format('d.m.Y H:i') }}
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:{{ $void }};">
<tr>
<td align="center" style="padding:32px 12px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px; max-width:100%;">
{{-- Brand row --}}
<tr>
<td style="padding:0 4px 14px 4px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align:middle;">
<img src="{{ $message->embed(public_path('icon-192.png')) }}" width="28" height="28" alt="Clusev"
style="display:block; border:0; border-radius:6px;">
</td>
<td style="vertical-align:middle; padding-left:10px; font-family:{{ $sans }}; font-size:17px; font-weight:700; letter-spacing:0.04em; color:{{ $ink }};">
Clus<span style="color:{{ $accent }};">e</span>v
</td>
<td style="vertical-align:middle; padding-left:12px; font-family:{{ $mono }}; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:{{ $ink3 }};">
{{ __('alerts.mail_brand_tag') }}
</td>
</tr>
</table>
</td>
</tr>
{{-- Card --}}
<tr>
<td style="background-color:{{ $surface }}; border:1px solid {{ $line }}; border-radius:12px; overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
{{-- Signal rail --}}
<tr><td style="height:4px; background-color:{{ $state }}; font-size:0; line-height:0;">&nbsp;</td></tr>
{{-- Status band --}}
<tr>
<td style="padding:18px 28px 0 28px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color:{{ $stateTint }}; border:1px solid {{ $state }}; border-radius:999px; padding:5px 14px; font-family:{{ $mono }}; font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:{{ $state }};">
&#9679;&nbsp; {{ $stateLabel }}
</td>
</tr>
</table>
</td>
</tr>
{{-- Headline --}}
<tr>
<td style="padding:16px 28px 4px 28px; font-family:{{ $sans }}; font-size:24px; line-height:1.25; font-weight:700; color:{{ $ink }};">
{{ $rule }}
</td>
</tr>
<tr>
<td style="padding:0 28px 20px 28px; font-family:{{ $mono }}; font-size:12px; color:{{ $ink3 }};">
{{ $server }} &nbsp;&middot;&nbsp; {{ $when->format('d.m.Y H:i:s') }} UTC
</td>
</tr>
{{-- Terminal readout --}}
<tr>
<td style="padding:0 28px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
style="background-color:{{ $inset }}; border:1px solid {{ $line }}; border-radius:8px;">
<tr>
<td style="padding:6px 16px; border-bottom:1px solid {{ $line }}; font-family:{{ $mono }}; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:{{ $ink3 }};">
{{ __('alerts.mail_readout') }}
</td>
</tr>
<tr>
<td style="padding:14px 16px 4px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:{{ $mono }};">
<tr>
<td width="38%" style="padding:6px 0; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:{{ $ink3 }};">{{ __('alerts.mail_server') }}</td>
<td style="padding:6px 0; font-size:13px; color:{{ $ink }};">{{ $server }}</td>
</tr>
<tr>
<td style="padding:6px 0; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:{{ $ink3 }}; border-top:1px solid {{ $line }};">{{ __('alerts.mail_metric') }}</td>
<td style="padding:6px 0; font-size:13px; color:{{ $ink }}; border-top:1px solid {{ $line }};">{{ $metricLabel }}</td>
</tr>
<tr>
<td style="padding:6px 0; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:{{ $ink3 }}; border-top:1px solid {{ $line }};">{{ __('alerts.mail_value') }}</td>
<td style="padding:6px 0; font-size:16px; font-weight:700; color:{{ $state }}; border-top:1px solid {{ $line }};">{{ $valueText }}</td>
</tr>
@unless ($isOffline)
<tr>
<td style="padding:6px 0 12px 0; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:{{ $ink3 }}; border-top:1px solid {{ $line }};">{{ __('alerts.mail_threshold') }}</td>
<td style="padding:6px 0 12px 0; font-size:13px; color:{{ $ink2 }}; border-top:1px solid {{ $line }};">{{ rtrim(rtrim(number_format((float) $threshold, 1, ',', '.'), '0'), ',') }}{{ in_array($metric, ['cpu', 'mem', 'disk'], true) ? ' %' : '' }}</td>
</tr>
@endunless
</table>
</td>
</tr>
</table>
</td>
</tr>
{{-- CTA --}}
<tr>
<td style="padding:22px 28px 26px 28px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color:{{ $accent }}; border-radius:8px;">
<a href="{{ $dashboardUrl }}"
style="display:inline-block; padding:11px 22px; font-family:{{ $sans }}; font-size:13px; font-weight:700; color:#151006; text-decoration:none;">
{{ __('alerts.mail_open_dashboard') }} &rarr;
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{{-- Footer --}}
<tr>
<td style="padding:16px 6px 0 6px; font-family:{{ $mono }}; font-size:11px; line-height:1.7; color:{{ $ink3 }};">
{{ __('alerts.mail_footer_auto') }}<br>
{{ __('alerts.mail_footer_manage') }}
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>