Preview:
<!DOCTYPE html>
<html lang="${lang}"
      th:lang="${lang}"
      th:with="lang=${#locale.language}"
      xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="~{fragments/html-head}"/>
    <title>status.gallery Status Page (unframed)</title>
    <!-- if Turbo is available, index.html won't have included this head, so the meta refresh won't happen (which is good!) -->
    <!-- if JavaScript is disabled, Turbo won't be available, so this meta refresh will take the place of SSE -->
    <meta content="3" http-equiv="refresh" name="refresh"/>
    <script src="/scripts/status.js" async></script>
</head>
<body>
<div class="bg-light bg-gradient p-3 rounded shadow-lg">
    <h1 class="display-1 text-center" style="text-shadow: 0 1px 0 gray">status.gallery (unframed)</h1>
</div>
<turbo-frame id="status_frame">
    <div class="box">
        <ul class="container list-group">
            <li th:class="|my-1 py-3 d-flex list-group-item list-group-item-*{alert}|"
                th:each="observee : *{observees}"
                th:id="|observee*{id}|"
                th:object="${observee}">
                <div th:replace="~{fragments/observee-status-li :: observee-status-li}"></div>
            </li>
        </ul>
    </div>
</turbo-frame>
</body>
<link th:replace="~{fragments/footer}"/>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter