{% extends "base.html" %}
{% import "tool_parts.html" as p %}
{% block title %}{% if result %}{{ url }} is {{ result.verdict|lower }}: HTTP {{ result.status }} in {{ result.timing.total_ms }} ms{% else %}Free website uptime and speed check{% endif %}{% endblock %}
{% block desc %}{{ tool.desc }}{% endblock %}
{% block content %}
{{ p.head(tool) }}
{{ p.form(tool, input_value, 'https://example.com/page') }}
{{ p.error(error, url) }}
{% if result %}
{% set t = result.timing %}
{% call p.verdict(result.status|string, result.verdict_class, result.verdict ~ ' · HTTP ' ~ result.status, result.subtitle, result.final_url, checked_at) %}
  <div class="actions" style="align-self:center">
    <span class="pill {{ 'ok' if result.up else 'err' }}">{{ 'reachable' if result.up else 'error' }}</span>
    {% if result.http_version %}<span class="pill">{{ result.http_version }}</span>{% endif %}
    {% if result.ip %}<span class="pill mono">{{ result.ip }}</span>{% endif %}
  </div>
{% endcall %}
<div class="grid g2" style="align-items:start">
  <div class="panel">
    <h3 style="margin-top:0">Timing breakdown</h3>
    <div style="display:flex;height:18px;border-radius:6px;overflow:hidden;background:var(--bg2);margin-bottom:12px">
      {% for s in result.segments if s.ms %}<div title="{{ s.label }} {{ s.ms }} ms" style="width:{{ s.pct }}%;background:{{ s.color }}"></div>{% endfor %}
    </div>
    <table><tbody>
    {% for s in result.segments %}
    <tr><td style="width:14px"><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:{{ s.color }}"></span></td><td>{{ s.label }}</td><td style="text-align:right" class="mono">{{ s.ms }} ms</td></tr>
    {% endfor %}
    <tr><td></td><td><b>Total</b></td><td style="text-align:right" class="mono"><b>{{ t.total_ms }} ms</b></td></tr>
    </tbody></table>
    <p class="small dim" style="margin:10px 0 0">DNS, connect and TLS are measured on a probe connection to the first host; wait and download on the final response. One sample from one location, so treat it as a spot check.</p>
  </div>
  <div class="panel">
    <h3 style="margin-top:0">Redirect chain ({{ result.hops|length }} hop{{ '' if result.hops|length == 1 else 's' }})</h3>
    <ol style="margin:0;padding-left:20px;line-height:1.8">
    {% for h in result.hops %}<li><span class="pill {% if h.status < 300 %}ok{% elif h.status < 400 %}info{% else %}err{% endif %}">{{ h.status }}</span> <span class="mono" style="font-size:12.5px;word-break:break-all">{{ h.url }}</span> <span class="small dim">{{ h.ms }} ms</span></li>{% endfor %}
    </ol>
    {% if result.hops|length > 2 %}<p class="small warn" style="margin:8px 0 0">Every redirect adds a round trip. Point links straight at the final URL where you can.</p>{% endif %}
    <h3 style="margin:18px 0 8px">Response</h3>
    <dl class="kv">
      <dt>Status</dt><dd>HTTP {{ result.status }}</dd>
      <dt>Server</dt><dd>{{ result.server or '—' }}{% if result.powered_by %} · {{ result.powered_by }}{% endif %}</dd>
      <dt>Content-Type</dt><dd>{{ result.content_type or '—' }}</dd>
      <dt>Size</dt><dd>{{ result.size_kb }} KB{% if result.size_truncated %} (truncated at 3 MB){% endif %}</dd>
      <dt>Cache-Control</dt><dd>{{ result.cache_control or '—' }}</dd>
    </dl>
  </div>
</div>
{{ p.share(share_url) }}
{{ p.others(tools, tool, url) }}
{% else %}
<div class="grid g3" style="max-width:900px;margin:0 auto">
  <div class="panel"><h3 style="margin-top:0">What we check</h3><p class="small muted" style="margin:0">One real GET from Vigil's servers: HTTP status, DNS lookup, TCP connect, TLS handshake, time to first byte and download time, every redirect hop with its status, the server header and the response size.</p></div>
  <div class="panel"><h3 style="margin-top:0">"It works for me"</h3><p class="small muted" style="margin:0">A site can be up from your office and down from everywhere else: DNS, firewalls, CDN regions. A check from outside is the only one that counts.</p></div>
  <div class="panel"><h3 style="margin-top:0">Try it on</h3><p class="small muted" style="margin:0"><a href="/tools/uptime-check?url=puzaricloud.in">puzaricloud.in</a> · <a href="/tools/uptime-check?url=http://github.com">http://github.com</a> · <a href="/tools/uptime-check?url=example.com">example.com</a></p></div>
</div>
{% endif %}
{{ p.cta(tool, url) }}
{% endblock %}