healthchecks/templates/front/show_usage_modal.html

<div id="show-usage-modal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="usage-examples-title">Usage Examples</h4>
                <ul class="nav nav-pills" 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>
                        <a href="#ruby" data-toggle="tab">Ruby</a>
                    </li>
                    <li class="hidden-xs">
                        <a href="#node" data-toggle="tab">Node.js</a>
                    </li>
                    <li class="hidden-xs">
                        <a href="#go" data-toggle="tab">Go</a>
                    </li>
                    <li class="hidden-xs">
                        <a href="#php" data-toggle="tab">PHP</a>
                    </li>
                    <li class="hidden-xs">
                        <a href="#cs" data-toggle="tab">C#</a>
                    </li>
                    <li class="hidden-xs">
                        <a href="#browser" data-toggle="tab">Browser</a>
                    </li>
                    <li class="hidden-xs">
                        <a href="#powershell" data-toggle="tab">PowerShell</a>
                    </li>
                    <li class="hidden-xs">
                        <a href="#email" data-toggle="tab">Email</a>
                    </li>
                </ul>
            </div>
            <div class="modal-body">
                <div class="tab-content">
                    {% with ping_url=check.url|default:'<span class="ex"></span>' %}
                    <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_curl.html" %}
                        {% include "front/snippets/bash_wget.html" %}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="python">
                        {% include "front/snippets/python_urllib2.html" %}
                        {% include "front/snippets/python_requests.html" %}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="ruby">
                        {% include "front/snippets/ruby.html" %}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="node">
                        {% include "front/snippets/node.html" %}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="go">
                        {% include "front/snippets/go.html" %}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="php">
                        {% include "front/snippets/php.html" %}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="cs">
                        {% include "front/snippets/cs.html" %}
                    </div>
                    <div class="tab-pane" id="browser">
                        {% include "front/snippets/browser.html" %}
                    </div>
                    <div class="tab-pane" id="powershell">
                        {% include "front/snippets/powershell.html" %}
                    </div>
                    <div class="tab-pane" id="email">
                        <p>
                        As an alternative to HTTP/HTTPS requests,
                        you can "ping" this check by sending an
                        email message to
                        <code class="em">{{ check.email }}</code>
                        </p>
                    </div>
                    {% endwith %}
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
            </div>
        </div>
    </div>
</div>