index.html

---
layout: default
---
<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
            <div class="row">
                <div class="col-sm-4">
                    <ul class="nav nav-pills nav-justified" id="statusTabs">
                    {% for status in site.status_pages %}
                      <li {% if forloop.first == true %} class="active"{% endif %}>
                        <a href="#{{status.key}}" data-toggle="tab">{{ status.title }}</a>
                      </li>
                    {% endfor %}
                    </ul>
                </div>
                <div class="col-sm-2 col-sm-offset-6 text-right">
                    <a class="btn btn-primary refresh-status" data-toggle="tooltip" data-placement="left" title="Refresh Status">
                        <i class="fa fa-refresh"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="tab-content">
              {% for status in site.status_pages %}
              <div class="tab-pane{% if forloop.first == true %} active{% endif %}" id="{{status.key}}">
                {% if status.target == "comingsoon" %}
                <h2 class="help-text text-center">Coming soon..</h2>
                {% else %}
                  <div id="load-img-{{status.key}}" class="text-center load-img">Loading..</div>
                  <iframe class="status_page" width="100%" height="1435px" frameborder="0" src="https://updown.io/{{ status.target }}" target="_parent" onload="document.getElementById('load-img-{{status.key}}').style.display='none';"></iframe>
                {% endif %}
              </div>
              {% endfor %}
            </div>
        </div>
    </div>
</div>