More content on welcome page, more alternatives in docs. Rename "Grace Period" to "Grace Time"

hc/front/management/commands/pygmentize.py

@@ -19,3 +19,5 @@ class Command(BaseCommand):
         _process("browser.txt", "browser.html", lexers.JavascriptLexer())
         _process("crontab.txt", "crontab.html", lexers.BashLexer())
         _process("python.txt", "python.html", lexers.PythonLexer())
+        _process("php.txt", "php.html", lexers.PhpLexer())
+        _process("node.txt", "node.html", lexers.JavascriptLexer())

static/css/style.css

@@ -33,10 +33,15 @@ body {
 }
 
 .index-bleed {
-    background: #e5ece5;
+    background: #FFF;
     padding-bottom: 2em;
 }
 
+.get-started-bleed {
+    background: #e5ece5;
+    padding-bottom: 3em;
+}
+
 #pitch {
     text-align: center;
     padding: 72px 0;
@@ -65,18 +70,10 @@ body {
     border-color: #dddddd;
 }
 
-#welcome-status, #get-started {
+#get-started {
     margin-top: 4em;
 }
 
-#welcome-status th {
-    border-top: 0;
-}
-
-.welcome-browser-controls {
-    text-align: right;
-}
-
 .glyphicon.up, .glyphicon.new, .glyphicon.grace, .glyphicon.down {
     font-size: 22px;
 }
@@ -107,6 +104,15 @@ body {
     margin: 0;
 }
 
+.tour-title {
+    margin: 50px 0;
+}
+
+
+.tour-section {
+    margin-bottom: 50px;
+}
+
 /* Checks */
 
 table.table tr > th.th-name {

static/js/index.js

@@ -1,49 +0,0 @@
-$(function () {
-    $('[data-toggle="tooltip"]').tooltip();
-
-    var code = $("#check-code").text();
-    var url = $("#pitch-url").text();
-    url = url.replace("http://", "//");
-
-    var lastPing = null;
-    var lastPingHuman = null;
-
-    $("#run-it").click(function() {
-        $.get(url);
-    });
-
-    function checkLastPing() {
-        $.getJSON("/status/" + code + "/", function(data) {
-            if (data.last_ping != lastPing) {
-                lastPing = data.last_ping;
-                $("#timer").data("timer", data.secs_to_alert);
-            }
-
-            var lph = data.last_ping_human;
-            if (lph && lph.indexOf("seconds ago") > 0)
-                data.last_ping_human = "seconds ago";
-
-            if (data.last_ping_human != lastPingHuman) {
-                lastPingHuman = data.last_ping_human;
-                $("#last-ping").text(lastPingHuman);
-            }
-        });
-    }
-
-    function updateTimer() {
-        var timer = parseInt($("#timer").data("timer"));
-        if (timer == 0)
-            return;
-
-        var s = timer % 60;
-        var m = parseInt(timer / 60) % 60;
-        var h = parseInt(timer / 3600);
-        $("#timer").text(h + "h " + m + "m " + s + "s");
-
-        $("#timer").data("timer", timer - 1);
-    }
-
-    setInterval(checkLastPing, 3000);
-    setInterval(updateTimer, 1000);
-
-});

templates/base.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>{% block title %}healthchecks.io - Get Notified When Your Cron Jobs Fail{% endblock %}</title>
     <meta name="description" content="Monitor and Get Notified When Your Cron Jobs Fail. Free alternative to Cronitor and Dead Man's Snitch.">
-    <meta name="keywords" content="monitor cron jobs daemon background worker service cronjob monitoring crontab alert notify cronitor deadmanssnitch">
+    <meta name="keywords" content="monitor cron jobs daemon background worker service cronjob monitoring crontab alert notify cronitor deadmanssnitch webhook">
 
     <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
 

templates/front/about.html

@@ -33,12 +33,64 @@
         </p>
 
         <h3>Alternative Services</h3>
-        <ul>
+        <table class="table">
-            <li><a href="https://cronitor.io/">Cronitor.io</a></li>
+            <tr>
-            <li><a href="https://deadmanssnitch.com/">Dead Man's Snitch</a></li>
+                <td>
-            <li><a href="https://github.com/quantopian/coal-mine">Coal Mine</a></li>
+                    <a href="https://cronitor.io/">Cronitor.io</a>
-        </ul>
+                </td>
+                <td>
+                    <p>One monitor is free.</p>
+                    <p>50 monitors is $24.95/mo.</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://cronitor.io/">Cronitor.io</a>
+                </td>
+                <td>
+                    <p>One snitch is free.</p>
+                    <p>3 snitches is $5/mo.</p>
+                    <p>100 snitches is $19/mo.</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://github.com/quantopian/coal-mine">Coal Mine</a>
+                </td>
+                <td>
+                    <p>Open Source.</p>
+                    <p>No hosted service. No web UI, just API.</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="http://www.pushmon.com/">PushMon</a>
+                </td>
+                <td>
+                    <p>Free during public beta.</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://steward.io">steward.io</a>
+                </td>
+                <td>
+                    <p>15 jobs is free.</p>
+                    <p>75 jobs is $7/mo.</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href="https://www.cronalarm.com/">CronAlarm</a>
+                </td>
+                <td>
+                    <p>10 jobs is $5/mo.</p>
+                    <p>100 jobs is $20/mo.</p>
+                </td>
+            </tr>
 
+
+        </table>
     </div>
 </div>
 {% endblock %}

templates/front/my_checks.html

@@ -169,7 +169,7 @@
                             class="update-timeout-label"
                             data-toggle="tooltip"
                             title="When check is late, how much time to wait until alert is sent">
-                            Grace Period
+                            Grace Time
                         </span>
                         <span
                             id="grace-slider-value"
@@ -186,7 +186,7 @@
                             Expected time between pings.
                         </p>
                         <p>
-                            <span>Grace Period</span>
+                            <span>Grace Time</span>
                             When a check is late, how much time to wait until alert is sent.
                         </p>
                     </div>

templates/front/snippets/crontab.html

@@ -1,3 +1,3 @@
-<div class="highlight"><pre><span class="c"># m h  dom mon dow   command</span>
+<div class="highlight"><pre><span class="c"># m h dom mon dow   command</span>
   <span class="m">8</span> <span class="m">6</span> *   *   *     /home/user/tasks/backup_all.sh <span class="o">&amp;&amp;</span> curl {{ ping_url }}
 </pre></div>

templates/front/snippets/crontab.txt

@@ -1,2 +1,2 @@
-# m h  dom mon dow   command
+# m h dom mon dow   command
   8 6 *   *   *     /home/user/tasks/backup_all.sh && curl PING_URL

templates/front/snippets/node.html

@@ -0,0 +1,3 @@
+<div class="highlight"><pre><span class="kd">var</span> <span class="nx">http</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;http&#39;</span><span class="p">);</span>
+<span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">);</span>
+</pre></div>

templates/front/snippets/node.txt

@@ -0,0 +1,2 @@
+var http = require('http');
+http.get("PING_URL");

templates/front/snippets/php.html

@@ -0,0 +1,2 @@
+<div class="highlight"><pre><span class="x">file_get_contents(&#39;{{ ping_url }}&#39;);</span>
+</pre></div>

templates/front/snippets/php.txt

@@ -0,0 +1 @@
+file_get_contents('PING_URL');

templates/front/welcome.html

@@ -50,11 +50,14 @@
                 <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 class="welcome-browser-controls">
-                        <button id="run-it" class="btn btn-default">Run It!</button>
-                    </div>
                 </div>
             </div>
         </div>
@@ -62,38 +65,10 @@
 </div>
 </div>
 
+<div class="get-started-bleed">
 <div class="container">
     <div class="row">
-        <div id="welcome-status" class="col-sm-6">
+        <div id="get-started" class="col-sm-6 col-sm-offset-3">
-            <h2>Status
-            <small id="check-code">{{ check.code }}</small>
-            </h2>
-            <table class="table">
-                <tr>
-                    <th>Last ping</th>
-                    <th>Period</th>
-                    <th>Alert in</th>
-                </tr>
-                <tr>
-                    <td id="last-ping">
-                        {% if check.last_ping %}
-                            {{ check.last_ping|naturaltime }}
-                        {% else %}
-                            Never
-                        {% endif %}
-                    </td>
-                    <td>
-                        1 day
-                        (log in to change)
-                    </td>
-                    <td id="timer" data-timer="{{ timer}}">
-                        {{ timer_formatted }}
-                    </td>
-                </tr>
-            </table>
-        </div>
-
-        <div id="get-started" class="col-sm-6">
             <h3>E-mail Address to Receive Alerts:</h3>
             <form action="{% url 'hc-login' %}" method="post">
                 {% csrf_token %}
@@ -121,12 +96,100 @@
         </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' %}" 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' %}" 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 an email alert.
+                </td>
+            </tr>
+        </table>
+
+    </div>
+    </div>
+
+</div>
+
+
+
+
 {% endblock %}
 
 {% block scripts %}
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
-<script src="{% static 'js/index.js' %}"></script>
 {% endcompress %}
 {% endblock %}