healthchecks_healthchecks/templates/front/update_timeout_modal.html

<div id="update-timeout-modal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="update-timeout-form" method="post">
                {% csrf_token %}
                <input type="hidden" name="kind" value="simple" />
                <input type="hidden" name="timeout" id="update-timeout-timeout" />
                <input type="hidden" name="grace" id="update-timeout-grace" />

                <div class="modal-body">
                    <div class="interval-controls">
                        <label for="period-value">Period</label>
                        <input
                            id="period-value"
                            type="number"
                            min="1"
                            class="period-input form-control input-lg" />
                        <select id="period-unit" class="period-input form-control input-lg">
                            <option value="60">minutes</option>
                            <option value="3600">hours</option>
                            <option value="86400">days</option>
                        </select>
                    </div>
                    <div id="period-slider"></div>

                    <div class="interval-controls">
                        <label for="grace-value">Grace Time</label>
                        <input
                            id="grace-value"
                            type="number"
                            min="1"
                            class="grace-input form-control input-lg" />
                        <select id="grace-unit" class="grace-input form-control input-lg">
                            <option value="60">minutes</option>
                            <option value="3600">hours</option>
                            <option value="86400">days</option>
                        </select>
                    </div>
                    <div id="grace-slider"></div>

                    <div class="update-timeout-terms">
                        <p>
                            <span>Period</span>
                            – The expected time between pings.
                        </p>
                        <p>
                            <span>Grace Time</span>
                            – When a check is late, <strong>or</strong> has
                            received a "start" signal, how long to wait to send an alert.
                        </p>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="btn-group pull-left">
                        <label class="btn btn-default kind-simple active">Simple</label>
                        <label class="btn btn-default kind-cron">Cron</label>
                        <label class="btn btn-default kind-oncalendar">OnCalendar</label>
                    </div>

                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>

            <form id="update-cron-form" method="post">
                {% csrf_token %}
                <input type="hidden" name="kind" value="cron" />
                <input type="hidden" name="grace" id="update-cron-grace"/>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="schedule">Cron Expression</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="schedule"
                                    name="schedule"
                                    placeholder="* * * * *"
                                    maxlength="100">
                                <div class="schedule-hint">
                                    m h dom mon dow
                                    <a href="{% url 'hc-docs-cron' %}" target="_blank">(cheatsheet)</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="tz">Server's Time Zone</label>
                                <br />
                                <select id="tz" name="tz" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="update-timeout-grace-cron">Grace Time</label>   
                                <div class="input-group select-group">
                                    <input
                                        type="number"
                                        min="1"
                                        class="form-control update-timeout-grace-cron-input"
                                        id="update-timeout-grace-cron"
                                        >

                                        <select id="update-timeout-grace-cron-unit" class="form-control update-timeout-grace-cron-input">
                                            <option value="60">minutes</option>
                                            <option value="3600">hours</option>
                                            <option value="86400">days</option>
                                        </select>
                                </div>
                            </div>     
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="cron-preview"></div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="btn-group pull-left">
                        <label class="btn btn-default kind-simple">Simple</label>
                        <label class="btn btn-default active kind-cron">Cron</label>
                        <label class="btn btn-default kind-oncalendar">OnCalendar</label>
                    </div>

                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button id="update-cron-submit" type="submit" class="btn btn-primary" {% if not rw %}disabled{% endif %}>
                        Save
                    </button>
                </div>
            </form>

            <form id="update-oncalendar-form" method="post">
                {% csrf_token %}
                <input type="hidden" name="kind" value="oncalendar" />
                <input type="hidden" name="grace" id="update-oncalendar-grace"/>
                <div class="modal-body">
                    <div class="row">
                        <div id="oncalendar-controls" class="col-md-6">
                            <div class="form-group">
                                <label for="schedule-oncalendar">OnCalendar Expression(s)</label>
                                <textarea
                                    id="schedule-oncalendar"
                                    name="schedule"
                                    class="form-control"
                                    rows="5"
                                    placeholder="*-*-* *:*:*"
                                    maxlength="100"></textarea>
                                <div class="schedule-hint">
                                    <a href="https://www.man7.org/linux/man-pages/man7/systemd.time.7.html#CALENDAR_EVENTS" target="_blank">syntax reference</a>
                                </div>

                            </div>
                            <div class="form-group">
                                <label for="tz-oncalendar">Server's Time Zone</label>
                                <br />
                                <select id="tz-oncalendar" name="tz" class="form-control"></select>
                            </div>
                            <div class="form-group">
                                <label for="update-timeout-grace-oncalendar">Grace Time</label>
                                <div class="input-group select-group">
                                    <input
                                        type="number"
                                        min="1"
                                        class="form-control update-timeout-grace-oncalendar-input"
                                        id="update-timeout-grace-oncalendar"
                                        >
                                        <select id="update-timeout-grace-oncalendar-unit" class="form-control update-timeout-grace-oncalendar-input">
                                            <option value="60">minutes</option>
                                            <option value="3600">hours</option>
                                            <option value="86400">days</option>
                                        </select>
                                    </div>
                            </div>
                        </div>
                        <div id="oncalendar-preview" class="col-md-6"></div>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="btn-group pull-left">
                        <label class="btn btn-default kind-simple">Simple</label>
                        <label class="btn btn-default kind-cron">Cron</label>
                        <label class="btn btn-default active kind-oncalendar">OnCalendar</label>
                    </div>

                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button id="update-oncalendar-submit" type="submit" class="btn btn-primary" {% if not rw %}disabled{% endif %}>
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>