You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

142 lines
5.0 KiB

{% extends "base.html" %}
{% load compress static hc_extras %}
{% block title %}Status Badges - {{ site_name }}{% endblock %}
{% block content %}
<div class="row">
<div class="col-sm-10">
<h1>Status Badges</h1>
<p id="badges-description">
{{ site_name }} provides status badges for each of the tags
you have used. The badges have public, but hard-to-guess
URLs. You can use them in your READMEs,
dashboards or status pages.
</p>
<p>Each badge can be in one of the following states:</p>
<ul>
<li><strong>up</strong> – all matching checks are up.</li>
<li><strong>down</strong> – at least one check is currently down.</li>
</ul>
<p>
As an option, the badges can report a third state:
<strong>late</strong> (when at least one check is running late but has not
exceeded its grace time yet).
</p>
<br />
<div class="btn-group" data-toggle="buttons">
<label id="show-svg" class="btn btn-default active">
<input type="radio" checked> SVG
</label>
<label id="show-json" class="btn btn-default">
<input type="radio"> JSON
</label>
<label id="show-shields" class="btn btn-default">
<input type="radio"> Shields.io
</label>
</div>
&nbsp;
<div class="btn-group" data-toggle="buttons">
<label id="show-no-late" class="btn btn-default active">
<input type="radio" checked> Badge states: <b>up</b> or <b>down</b>
</label>
<label id="show-with-late" class="btn btn-default">
<input type="radio"> Badge states: <b>up</b>, <b>late</b> or <b>down</b>
</label>
</div>
<table id="badges-svg" class="table badge-preview">
{% if have_tags %}
<tr><th colspan="2">Tags</th></tr>
{% endif %}
{% for urldict in badges %}
{% if urldict.tag == "*" %}
<tr>
<th colspan="2">Overall Status</th>
</tr>
{% endif %}
<tr>
<td>
<img class="no-late" src="{{ urldict.svg }}" alt="" />
<img class="with-late" src="{{ urldict.svg3 }}" alt="" />
</td>
<td>
<code class="no-late">{{ urldict.svg }}</code>
<code class="with-late">{{ urldict.svg3 }}</code>
</td>
</tr>
{% endfor %}
</table>
<table id="badges-json" class="table badge-preview">
{% if have_tags %}
<tr>
<th colspan="2">Tags</th>
</tr>
{% endif %}
{% for urldict in badges %}
{% if urldict.tag == "*" %}
<tr>
<th colspan="2">Overall Status</th>
</tr>
{% endif %}
<tr>
<td>
<code class="fetch-json no-late" data-url="{{ urldict.json }}"></code>
<code class="fetch-json with-late" data-url="{{ urldict.json3 }}"></code>
</td>
<td>
<code class="no-late">{{ urldict.json }}</code>
<code class="with-late">{{ urldict.json3 }}</code>
</td>
</tr>
{% endfor %}
</table>
<table id="badges-shields" class="table badge-preview">
{% if have_tags %}
<tr>
<th>Shields.io badge</th>
<th>JSON endpoint for Shields.io <a href="https://shields.io/endpoint">(how to use)</a></th>
</tr>
{% endif %}
{% for urldict in badges %}
{% if urldict.tag == "*" %}
<tr>
<th colspan="2">Overall Status</th>
</tr>
{% endif %}
<tr>
<td>
<img class="no-late" src="https://img.shields.io/endpoint?url={{ urldict.shields|urlencode:"" }}" alt="" />
<img class="with-late" src="https://img.shields.io/endpoint?url={{ urldict.shields3|urlencode:"" }}" alt="" />
</td>
<td>
<code class="no-late">{{ urldict.shields }}</code>
<code class="with-late">{{ urldict.shields3 }}</code>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
{% endblock %}
{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/badges.js' %}"></script>
{% endcompress %}
{% endblock %}