Split style.css in smaller files. Email instructions in welcome page.

hc/api/models.py

@@ -32,6 +32,9 @@ class Check(models.Model):
     def url(self):
         return settings.PING_ENDPOINT + str(self.code)
 
+    def email(self):
+        return "%s@%s" % (self.code, settings.PING_EMAIL_DOMAIN)
+
     def send_alert(self):
         ctx = {
             "check": self,

hc/front/views.py

@@ -21,19 +21,9 @@ def _welcome(request):
         code = request.session["welcome_code"]
         check = Check.objects.get(code=code)
 
-    if check.alert_after:
-        duration = check.alert_after - timezone.now()
-        timer = int(duration.total_seconds())
-        timer_formatted = "%dh %dm %ds" % (timer / 3600, (timer / 60) % 60, timer % 60)
-    else:
-        timer = 0
-        timer_formatted = "Never"
-
     ctx = {
         "page": "welcome",
         "check": check,
-        "timer": timer,
-        "timer_formatted": timer_formatted,
         "ping_url": check.url()
     }
 

hc/settings.py

@@ -90,6 +90,7 @@ USE_TZ = True
 
 SITE_ROOT = "http://localhost:8000"
 PING_ENDPOINT = SITE_ROOT + "/ping/"
+PING_EMAIL_DOMAIN = HOST
 STATIC_URL = '/static/'
 STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
 STATIC_ROOT = os.path.join(BASE_DIR, 'static-collected')

static/css/base.css

@@ -0,0 +1,59 @@
+html {
+    position: relative;
+    min-height: 100%;
+}
+
+body {
+    /* Margin bottom by footer height */
+    margin-bottom: 60px;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    /* Set the fixed height of the footer here */
+    height: 60px;
+    line-height: 60px;
+    color: #AAA;
+    text-align: center;
+}
+
+.navbar-nav {
+    text-transform: uppercase;
+    font-size: small;
+}
+
+.navbar-text {
+    font-size: small;
+}
+
+.glyphicon.up, .glyphicon.new, .glyphicon.grace, .glyphicon.down {
+    font-size: 22px;
+}
+
+.glyphicon.up {
+    color: #5cb85c;
+}
+
+.glyphicon.new {
+    color: #AAA;
+}
+
+.glyphicon.grace {
+    color: #f0ad4e;
+}
+
+.glyphicon.down {
+    color: #d9534f;
+}
+
+#login_dialog {
+    background: #FFF;
+    padding: 2em;
+    margin-top: 100px;
+}
+
+#login_dialog h1 {
+    margin: 0;
+}

static/css/log.css

@@ -0,0 +1,3 @@
+.log-table .remote-addr, .log-table .ua {
+    font-family: monospace;
+}

static/css/my_checks.css

@@ -0,0 +1,58 @@
+#update-timeout-modal .modal-body {
+    padding-top: 40px;
+}
+
+.update-timeout-info {
+    line-height: 22px;
+}
+
+.update-timeout-label {
+    position: relative;
+    right: 3px;
+    display: inline-block;
+    text-align: right;
+    width: 100px;
+}
+
+.update-timeout-value {
+    font-size: 22px;
+    display: inline-block;
+    width: 100px;
+    text-align: left;
+    white-space: nowrap;
+
+}
+
+#period-slider {
+    margin: 20px 50px 80px 50px;
+}
+
+#period-slider.noUi-connect {
+  background: #5cb85c;
+}
+
+#grace-slider {
+    margin: 20px 50px 110px 50px;
+}
+
+#grace-slider.noUi-connect {
+  background: #f0ad4e;
+}
+
+#period-slider .noUi-value, #grace-slider .noUi-value {
+    width: 60px;
+    margin-left: -30px;
+}
+
+.update-timeout-terms {
+    color: #999;
+}
+
+.update-timeout-terms p {
+    margin: 0;
+}
+
+
+.update-timeout-terms span {
+    font-weight: bold;
+}

static/css/my_checks_desktop.css

@@ -0,0 +1,62 @@
+.my-checks-name.unnamed {
+    color: #999;
+    font-style: italic;
+}
+
+
+table.table tr > th.th-name {
+    padding-left: 21px;
+}
+
+#checks-table .indicator-cell {
+    text-align: center;
+}
+
+#checks-table th {
+    border-top: 0;
+}
+
+#checks-table td {
+    vertical-align: middle;
+}
+
+#checks-table .my-checks-name {
+    border: 1px solid rgba(0, 0, 0, 0);
+    padding: 6px;
+    display: block;
+}
+
+#checks-table tr:hover .my-checks-name {
+    border: 1px dotted #AAA;
+}
+
+.url-cell {
+    font-size: small;
+    position: relative;
+}
+
+#checks-table > tbody > tr > th.th-period {
+    padding-left: 15px;
+}
+
+#checks-table .timeout-grace {
+    border: 1px solid rgba(0, 0, 0, 0);
+    padding: 6px;
+    display: block;
+}
+
+#checks-table tr:hover .timeout-grace {
+    border: 1px dotted #AAA;
+}
+
+.checks-subline {
+    color: #888;
+}
+
+.check-menu {
+    visibility: hidden;
+}
+
+tr:hover .check-menu {
+    visibility: visible;
+}

static/css/style.css

@@ -1,257 +0,0 @@
-html {
-    position: relative;
-    min-height: 100%;
-}
-
-body {
-    /* Margin bottom by footer height */
-    margin-bottom: 60px;
-}
-
-.footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    /* Set the fixed height of the footer here */
-    height: 60px;
-    line-height: 60px;
-    color: #AAA;
-    text-align: center;
-}
-
-.page-welcome .navbar {
-    margin-bottom: 0;
-}
-
-.navbar-nav {
-    text-transform: uppercase;
-    font-size: small;
-}
-
-.navbar-text {
-    font-size: small;
-}
-
-.index-bleed {
-    background: #FFF;
-    padding-bottom: 2em;
-}
-
-.get-started-bleed {
-    background: #e5ece5;
-    padding-bottom: 3em;
-}
-
-#pitch {
-    text-align: center;
-    padding: 72px 0;
-    margin: 0;
-}
-
-#pitch-subtitle {
-    margin-top: 0;
-    text-align: center;
-}
-
-#pitch-url {
-    text-align: center;
-    font-family: monospace;
-    padding-bottom: 72px;
-}
-
-.nav-tabs {
-    margin-bottom: 0;
-}
-
-.page-welcome .highlight pre {
-    background: #FFF;
-    border-top: 0;
-    border-radius: 0;
-    border-color: #dddddd;
-}
-
-#get-started {
-    margin-top: 4em;
-}
-
-.glyphicon.up, .glyphicon.new, .glyphicon.grace, .glyphicon.down {
-    font-size: 22px;
-}
-
-.glyphicon.up {
-    color: #5cb85c;
-}
-
-.glyphicon.new {
-    color: #AAA;
-}
-
-.glyphicon.grace {
-    color: #f0ad4e;
-}
-
-.glyphicon.down {
-    color: #d9534f;
-}
-
-#login_dialog {
-    background: #FFF;
-    padding: 2em;
-    margin-top: 100px;
-}
-
-#login_dialog h1 {
-    margin: 0;
-}
-
-.tour-title {
-    margin: 50px 0;
-}
-
-
-.tour-section {
-    margin-bottom: 50px;
-}
-
-/* Checks */
-
-table.table tr > th.th-name {
-    padding-left: 21px;
-}
-
-#checks-table .indicator-cell {
-    text-align: center;
-}
-
-#checks-table th {
-    border-top: 0;
-}
-
-#checks-table td {
-    vertical-align: middle;
-}
-
-#checks-table .my-checks-name {
-    border: 1px solid rgba(0, 0, 0, 0);
-    padding: 6px;
-    display: block;
-}
-
-#checks-table tr:hover .my-checks-name {
-    border: 1px dotted #AAA;
-}
-
-.my-checks-name.unnamed {
-    color: #999;
-    font-style: italic;
-}
-
-.url-cell {
-    font-size: small;
-    position: relative;
-}
-
-td.inactive .popover {
-    visibility: hidden;
-}
-
-.popover.timeout-dialog.bottom {
-    display: block;
-    position: absolute;
-    top: auto;
-    left: auto;
-    margin-top: 57px;
-    margin-left: -77px;
-}
-
-#checks-table > tbody > tr > th.th-period {
-    padding-left: 15px;
-}
-
-#checks-table .timeout-grace {
-    border: 1px solid rgba(0, 0, 0, 0);
-    padding: 6px;
-    display: block;
-}
-
-#checks-table tr:hover .timeout-grace {
-    border: 1px dotted #AAA;
-}
-
-.checks-subline {
-    color: #888;
-}
-
-.check-menu {
-    visibility: hidden;
-}
-
-tr:hover .check-menu {
-    visibility: visible;
-}
-
-
-#update-timeout-modal .modal-body {
-    padding-top: 40px;
-}
-
-.update-timeout-info {
-    line-height: 22px;
-}
-
-.update-timeout-label {
-    position: relative;
-    right: 3px;
-    display: inline-block;
-    text-align: right;
-    width: 100px;
-}
-
-.update-timeout-value {
-    font-size: 22px;
-    display: inline-block;
-    width: 100px;
-    text-align: left;
-    white-space: nowrap;
-
-}
-
-#period-slider {
-    margin: 20px 50px 80px 50px;
-}
-
-#period-slider.noUi-connect {
-  background: #5cb85c;
-}
-
-#grace-slider {
-    margin: 20px 50px 110px 50px;
-}
-
-#grace-slider.noUi-connect {
-  background: #f0ad4e;
-}
-
-#period-slider .noUi-value, #grace-slider .noUi-value {
-    width: 60px;
-    margin-left: -30px;
-}
-
-.update-timeout-terms {
-    color: #999;
-}
-
-.update-timeout-terms p {
-    margin: 0;
-}
-
-
-.update-timeout-terms span {
-    font-weight: bold;
-}
-
-/* Log */
-
-.log-table .remote-addr, .log-table .ua {
-    font-family: monospace;
-}

static/css/welcome.css

@@ -0,0 +1,67 @@
+.page-welcome .navbar {
+    margin-bottom: 0;
+}
+
+.index-bleed {
+    background: #FFF;
+    padding-bottom: 2em;
+}
+
+.get-started-bleed {
+    background: #e5ece5;
+    padding-bottom: 3em;
+}
+
+#pitch {
+    text-align: center;
+    padding: 72px 0;
+    margin: 0;
+}
+
+#pitch-subtitle {
+    margin-top: 0;
+    text-align: center;
+}
+
+#pitch-url {
+    text-align: center;
+    font-family: monospace;
+    padding-bottom: 72px;
+}
+
+.nav-tabs {
+    margin-bottom: 0;
+}
+
+.page-welcome .highlight pre {
+    background: #FFF;
+    border-top: 0;
+    border-radius: 0;
+    border-color: #dddddd;
+}
+
+#email .instructions {
+    background: #FFF;
+    border: 1px solid #dddddd;
+    border-top: 0;
+    padding: 10px;
+}
+
+#email .email-address {
+    font-size: 18px;
+    padding-top: 10px;
+}
+
+
+#get-started {
+    margin-top: 4em;
+}
+
+.tour-title {
+    margin: 50px 0;
+}
+
+
+.tour-section {
+    margin-bottom: 50px;
+}

templates/base.html

@@ -14,8 +14,11 @@
     <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.pips.css' %}" type="text/css">
-    <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
-    <link rel="stylesheet" href="{% static 'css/checks-list.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/welcome.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/my_checks.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/my_checks_mobile.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/my_checks_desktop.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/pricing.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css">
     {% endcompress %}

templates/front/my_checks_desktop.html

@@ -36,7 +36,7 @@
         <td class="url-cell">
             <code>{{ check.url }}</code>
         </td>
-        <td class="timeout-cell inactive">
+        <td class="timeout-cell">
             <span
                 data-url="{% url 'hc-update-timeout' check.code %}"
                 data-timeout="{{ check.timeout.total_seconds }}"

templates/front/welcome.html

@@ -39,6 +39,9 @@
                 <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">
@@ -59,6 +62,16 @@
                 <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">
+                            <a href="mailto:{{ check.email }}">{{ check.email }}</a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>