index.html

---
title: march sadness
layout: default
custom_js:
- lib/tinycolor.js
- lib/chroma.min.js
- color.js
- compare.js
---

<div class="row">
  <div class="col">
    <br />
    <h1><img src="static/img/hoop.gif" width="75" /> march sadness</h1>
    <p class="lead">if u love ur friends but hate basketball, let the computer do your bracket for you.</p>

    <marquee>
      <h2>🔥 updated for 2019 🔥</h2>
    </marquee>

    <p>two-thirds of the time, it returns the better team as measured by power index ranking. one-third of the time it returns the underdog. for teams within 15 spots of one another (in terms of bpi ranking), it returns whichever team has the color closest to your fave!</p>

    <p>speaking of, pick yr color now. 👇</p>

    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">🌈</div>
      </div>
      <input id="color-pick" type="text" class="form-control" />
    </div><br />

    <button class="btn btn-lg btn-dark float-right" id="go">
      participate socially!
    </button>
  </div>
</div>

<div class="clear-fix">&nbsp;</div>

<div id="the-good-stuff" class="row collapse">

  <div class="container h-80">
    <h2>
      <strong>~* the final four *~</strong>
      <small>a.k.a. who wins?</small>
    </h2>
    <div class="row align-items-center h-80">
      <div class="col mx-auto result" id="final-4"></div>
      <div class="col mx-auto result" id="final-2"></div>
      <div class="col-mx-auto result text-center" id="champion"></div>
    </div>
  </div>

  <hr />

  <div class="container">
  <h2><strong>everything else...</strong></h2>
  </div>

  <div class="container h-80">
    <h3>south</h3>
    <div class="row align-items-center h-80">
      <div class="col mx-auto result" id="south-16"></div>
      <div class="col mx-auto result" id="south-8"></div>
      <div class="col mx-auto result" id="south-4"></div>
      <div class="col mx-auto result" id="south-2"></div>
    </div>
  </div>

  <hr />

  <div class="container h-80">
    <h3>west</h3>
    <div class="row align-items-center h-80">
      <div class="col mx-auto result" id="west-16"></div>
      <div class="col mx-auto result" id="west-8"></div>
      <div class="col mx-auto result" id="west-4"></div>
      <div class="col mx-auto result" id="west-2"></div>
    </div>
  </div>

  <hr />

  <div class="container h-80">
    <h3>east</h3>
    <div class="row align-items-center h-80">
      <div class="col mx-auto result" id="east-16"></div>
      <div class="col mx-auto result" id="east-8"></div>
      <div class="col mx-auto result" id="east-4"></div>
      <div class="col mx-auto result" id="east-2"></div>
    </div>
  </div>

  <hr />

  <div class="container h-80">
    <h3>midwest</h3>
    <div class="row align-items-center h-80">
      <div class="col mx-auto result" id="midwest-16"></div>
      <div class="col mx-auto result" id="midwest-8"></div>
      <div class="col mx-auto result" id="midwest-4"></div>
      <div class="col mx-auto result" id="midwest-2"></div>
    </div>
  </div>

</div>

<div class="footer text-center text-muted">
  a <a href="https://twitter.com/hancush">@hancush</a> production. ✨<br />
  <a href="https://github.com/hancush/march-sadness">fork me on github</a>.
</div>