Tankernn
/
wow-achievement-comparator


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html>
  <head>
    <title>WoW Achievement Comparator</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/fb25a8fad8.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.css"/>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-md-offset-2">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Add character</h3>
            </div>
            <div class="panel-body">
              <form role="form" id="character">
                <fieldset>
                  <div class="form-group">
                    <select title="Select realm..." class="form-control selectpicker" data-live-search="true" name="realm">
                      <option value="neptulon">
                        Neptulon
                      </option>
                    </select>
                  </div>
                  <div class="form-group">
                    <input class="form-control" placeholder="Character name" name="name" autofocus="" type="text">
                  </div>
                  <button class="btn btn-block btn-primary">Add <i class="fa fa-plus"></i></button>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Select achievement</h3>
            </div>
            <div class="panel-body">
              <form role="form" id="achievement">
                <fieldset>
                  <div class="form-group">
                    <select title="Search achievement..." class="form-control selectpicker" data-live-search="true" name="achievement">
                      <option value="achievement">
                        Explore...
                      </option>
                    </select>
                  </div>
                  <button class="btn btn-block btn-primary">Update</button>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <table class="table table-striped dataTable no-footer" role="grid" cellspacing="0">
            <thead>
              <tr role="row">
                <th>
                  Character
                </th>
                <th>
                  Progress
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  Example
                </td>
                <td>
                  <div class="progress">
                   <div class="progress-bar" role="progressbar" aria-valuenow="38"
                   aria-valuemin="0" aria-valuemax="57" style="width:66.7%">
                     <span class="sr-only">38/57 Complete</span>
                     38/57
                   </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.js"></script>
  </body>
</html>