Pēteris Caune d833d299c2 Don't use jQuery on welcome page, much less JS to load.
Slightly reduce the size of bootstrap.css, by commenting out unused components.
Unauthenticated users see full logo, logged in users see icon-only logo.
2015-10-10 18:42:27 +03:00

287 lines
9.9 KiB
HTML

{% extends "base.html" %}
{% load compress humanize staticfiles %}
{% block containers %}
<div class="index-bleed">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 id="pitch">Cron Monitoring. Get Notified When Your Cron Jobs Fail.</h1>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<p id="pitch-text">Make a HTTP GET request to this address from your cron job, daemon, script or long running task.
<strong>When this address is not requested for a set time period, you will get alerted.</strong> Below are snippets that are ready to be copy/pasted into your own scripts.</p>
</div>
<div class="col-sm-6 col-sm-pull-6">
<h2 id="pitch-subtitle">Here's an unique ping address for you:</h2>
<div id="pitch-url">
<input
id="pitch-url-input"
class="form-control"
type="text"
value="{{ ping_url }}"
readonly />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#crontab" data-toggle="tab">Crontab</a>
</li>
<li>
<a href="#bash" data-toggle="tab">Bash</a>
</li>
<li>
<a href="#python" data-toggle="tab">Python</a>
</li>
<li class="hidden-xs">
<a href="#node" data-toggle="tab">Node.js</a>
</li>
<li class="hidden-xs">
<a href="#php" data-toggle="tab">PHP</a>
</li>
<li class="hidden-xs">
<a href="#browser" data-toggle="tab">Browser</a>
</li>
<li class="hidden-xs">
<a href="#email" data-toggle="tab">Email</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="crontab">
{% include "front/snippets/crontab.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="bash">
{% include "front/snippets/bash.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="python">
{% include "front/snippets/python.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="node">
{% include "front/snippets/node.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="php">
{% include "front/snippets/php.html" %}
</div>
<div class="tab-pane" id="browser">
{% include "front/snippets/browser.html" %}
</div>
<div class="tab-pane" id="email">
<div class="instructions">
As an alternative to HTTP/HTTPS requests,
you can "ping" this check by sending an
email message to
<div class="email-address">
<code>{{ check.email }}</code>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="get-started-bleed">
<div class="container">
<div class="row">
<div id="get-started" class="col-sm-6 col-sm-offset-3">
<h2>E-mail Address to Receive Alerts:</h2>
<form action="{% url 'hc-login' %}" method="post">
{% csrf_token %}
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-addon">@</div>
<input
type="email"
class="form-control"
id="id_email"
name="email"
autocomplete="email"
placeholder="Email">
</div>
</div>
<div class="clearfix">
<button type="submit" class="btn btn-lg btn-primary pull-right">
Get Started
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="tour-title">A quick peek of what's inside:</h2>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/my_checks.png' %}"
srcset="{% static 'img/my_checks.png'%} 1x, {% static 'img/my_checks@2x.png'%} 2x"
alt="My Checks page" />
</div>
<div class="col-sm-4">
<p>
A list of your checks, one for each Cron job, daemon or
periodically running task you want to monitor.
</p>
<p>
Give names to your checks to easily recognize them
later. Adjust Period and Grace time to match periodicity
and duration of your tasks.
</p>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/period_grace.png' %}"
srcset="{% static 'img/period_grace.png'%} 1x, {% static 'img/period_grace@2x.png'%} 2x"
alt="Period/Grace Time dialog" />
</div>
<div class="col-sm-4">
Each check has configurable <strong>Period</strong> and <strong>Grace Time</strong> parameters.
Depending on these parameters and time since the last ping, the check is in one of the
following states:
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-question-sign new"></span>
</td>
<td>
New.
A check that has been created, but has not received any pings yet.
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok-sign up"></span>
</td>
<td>
Up.
Time since last ping has not exceeded <strong>Period</strong>.
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-exclamation-sign grace"></span>
</td>
<td>
Late.
Time since last ping has exceeded <strong>Period</strong>,
but has not yet exceeded <strong>Period</strong> + <strong>Grace</strong>.
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-exclamation-sign down"></span>
</td>
<td>
Down.
Time since last ping has exceeded <strong>Period</strong> + <strong>Grace</strong>.
When check goes from "Late" to "Down", HealthChecks
sends you a notification.
</td>
</tr>
</table>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/channels.png' %}"
srcset="{% static 'img/channels.png'%} 1x, {% static 'img/channels@2x.png'%} 2x"
alt="Channels page" />
</div>
<div class="col-sm-4">
<p>
You can specify additional email addresses, webhooks,
<a href="https://www.pagerduty.com/">PagerDuty</a>,
<a href="https://slack.com/">Slack</a>
and <a href="https://www.hipchat.com/">HipChat</a>
accounts to send notifications to.
</p>
</div>
</div>
<div class="row">
<div class="footer-jumbo-bleed">
<div class="col-sm-12">
<div class="jumbotron">
<div class="row">
<div class="col-sm-7">
<p>healthchecks.io is a <strong>free</strong> and
<a href="https://github.com/healthchecks/healthchecks">open source</a> service.
Setting up monitoring for your cron jobs only takes minutes.
Start sleeping better at nights!</p>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<form action="{% url 'hc-login' %}" method="post">
{% csrf_token %}
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-addon">@</div>
<input
type="email"
class="form-control"
id="id_email"
name="email"
autocomplete="email"
placeholder="Email">
</div>
</div>
<div class="clearfix">
<button type="submit" class="btn btn-lg btn-primary pull-right">
Get Started
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
{% compress js %}
<script src="{% static 'js/tab-native.js' %}"></script>
<script src="{% static 'js/welcome.js' %}"></script>
{% endcompress %}
{% endblock %}