index.html

---
layout: home
---

<section class="container intro">
  <div class="row">
    <div class="col-sm-12 hidden-xs" style="height:50px;"></div>
    <div class="col-sm-12 visible-xs" style="height:20px;"></div>
    <div class="col-sm-4 col-md-3 intro-text">
      <p>Do you know how much money your county spends on "tea and biscuits", i.e. hospitality?</p>

      <p>Find out exactly how much and compare it not just to similar items that the same amount would buy, but also to other ways the money could be better used →</p>
    </div>
    <div class="col-sm-12 visible-xs" style="height:40px;"></div>
    <div class="col-sm-8 col-md-9 form-inline">
      <div class="lead">
        How much do you spend on
        <div class="form-group">
          <select class="form-control bi-comparatives">
            {% for comparative in site.data.comparatives %}
              <option value="{{ forloop.index0 }}" data-type="{{ comparative.type }}" data-amount="{{ comparative.amount }}">{{ comparative.name }}</option>
            {% endfor %}
          </select>
        </div>
        ?
        <div class="form-group">
          <input type="number" id="bi-compare-amt" placeholder="0" class="form-control">
        </div>
        <span class="currency">KES</span>
      </div>

      <div class="lead">
        Compare this to
        <div class="form-group">
          <select name="county" id="bi-county" class="form-control">
            {% assign counties = site.data.counties | sort: 'name' %}
            {% for county in counties %}
              <option value="{{ county.code }}">{{ county.name }}</option>
            {% endfor %}
          </select>
        </div>
        County’s expenditure on <em>&ldquo;tea and biscuits&rdquo;.</em>
      </div>

      <p class="lead">
        <button id="bi-compare" class="compare fx btn btn-lg btn-default">CALCULATE</button>
      </p>
    </div>
    <div class="col-sm-12" style="height:70px;"></div>
  </div> <!-- /.row -->
</section>


<section class="bi-output">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <div class="side-col">
          <div class="static-nav">
            <div class="inner">
              <p id="bi-county-name">Nairobi County's budget allocation on hospitality</p>
              <p id="bi-hospitality-budget-amt-text">0</p>
              <p id="bi-comparative-text">equals your Monthly Rentfor approximately</p>
              <p id="bi-comparative-count">0</p>
              <p id="bi-comparative-unit">people</p>
              <br/>
              <p>
                <a href="" id="twtbtn" class="twitter-hashtag-button" data-size="large" data-url="http://biscuitindex.codeforkenya.org">Tweet #BiscuitIndex</a>
              </p>
              <p>
                <div class="fb-share-button" data-href="https://biscuitindex.codeforkenya.org/" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbiscuitindex.codeforkenya.org%2F&amp;src=sdkpreparse">Share</a></div>
              </p>
            </div>
          </div>
        </div>
      </div> <!-- /.col-sm-3 -->
      <div class="col-sm-9">
        <div class="main-col">

          <div class="static-chart">
            <div class="icon-container output-icons" id="bi-icons">
              <i class="house"></i>
            </div>
            <div class="icon-legend">
              <span id="bi-icon"><i class="house"></i></span> = <span id="bi-icons-multiple">100</span> <span id="bi-comparative-name">homes</span>
            </div>
          </div> <!-- /.static-chart -->

          <div class="dynamic-chart bi-comparatives-defaults">
            <div class="mid-desc">More info here...</div>
            <div class="icon-row">
              <div class="">
                <div class="batch-count">
                  <div id="batch-count--mri" class="bi-icon-count"></div>
                  <div class="batch-count-name bi-comparative-name">MRI Machines</div>
                </div>
                <div class="icon-container mri-icons bi-icons"></div>
              </div>
              <div class="icon-legend">
                <span id="bi-icon"><i class="mri"></i></span> = <span id="bi-icons-multiple">100</span> <span class="output-ratio-units bi-comparative-name"> <strong>MRI</strong> machines</span>
              </div>
            </div>
            <div class="icon-row">
              <div class="">
                <div class="batch-count">
                  <div id="batch-count--dialysis" class="bi-icon-count"></div>
                  <div class="batch-count-name bi-comparative-name">Dialysis Machines</div>
                </div>
                <div class="icon-container dialysis-icons bi-icons"></div>
              </div>
              <div class="icon-legend">
                <span id="bi-icon"><i class="dialysis"></i></span> = <span id="bi-icons-multiple">100</span> <span class="output-ratio-units bi-comparative-name"> <strong>Dialysis</strong> Machines</span>
              </div>
            </div>
            <div class="icon-row">
              <div class="">
                <div class="batch-count">
                  <div id="batch-count--malarial"  class="bi-icon-count"></div>
                  <div class="batch-count-name bi-comparative-name">Malaria Drugs</div>
                </div>
                <div class="icon-container malarial-icons bi-icons"></div>
              </div>
              <div class="icon-legend">
                <span id="bi-icon"><i class="malarial"></i></span> = <span id="bi-icons-multiple">100</span> <span class="output-ratio-units bi-comparative-name"> <strong>Malaria</strong> Drugs</span>
              </div>
            </div>
          </div> <!-- /.dynamic-chart -->
        </div> <!-- /.main-col -->

      </div> <!-- /.col-sm-9 -->
    </div>
  </div><!--/ static -->

</section><!--/ output -->

{% include stories.html %}