instructions.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--link rel="shortcut icon" href="../../assets/ico/favicon.ico"-->

    <title>Facility Location Problem solution with k-medians algo</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
      .coordstable input {
        border-width: medium medium 0px;
        border-style: none none solid;
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        border-image: none;
        width: 100%;
      }
      .wellpanel {
        width: 100%;
        height: 100%;
        cursor: crosshair;
      }
      .point {
        cursor:pointer;
        position:absolute;
      }
      .facility {
        font-size:28px;
        cursor:default;
        position:absolute;
      }
      .wrongCoords {
        color:#BEBEBE;
      }
      .leftimg {
        float: left;
        margin-right: 3%;
        width: 30%;
      }
    </style>
  </head>

  <body style="overflow-y:scroll">

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Facility Location Problem solution with k-medians algo</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/">Home</a></li>
            <li class="active"><a href="instructions.html">Instructions</a></li>
            <li><a href="theory.html">Theory</a></li>
            <li><a href="#about" data-toggle="modal" data-target="#myModal">About</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="starter-template">
        <h1>Instructions</h1>
        <p class="lead">If you don't know what Facility Location Problem is, please, read <a href="theory.html">theory</a>.</p>
        <div style="width:100%; float:left;">
          <h3>1. Input</h3>
          <img src="img/1.jpg" class="leftimg"><p class="lead">To input object coordinate click anywhere in the field (1 on picture), or enter manually in "Objects coords" table (2 on picture). Remember that coords must fit in field.</p>
        </div>
        <div style="width:100%; float:left;">
          <h3>2. Buttons</h3>
          <img src="img/2.jpg" class="leftimg"><p class="lead">Click "Build" to run algo, "Reset" to clear data, "Random" to fill with random points.</p>
        </div>
        <div style="width:100%; float:left;">
          <h3>3. Output</h3>
          <img src="img/3.jpg" class="leftimg"><p class="lead">After "Build", get facilities coords in "Solution" table.</p>
        </div>
      
      </div>

    </div><!-- /.container -->

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title" id="myModalLabel">About</h3>
          </div>
          <div class="modal-body">
            This site created by Nick Levashov, student of <a href="http://mipt.ru/">MIPT</a>, on May 2014, for solving Facility Location Problems online and for demonstrating "k-medians" algorithm.<br><br>
            Great thanks to <a href="http://mipt.ru/education/chairs/dm/staff/glibichuk.html">Alexey Glibichuk</a> for giving me knowledge.<br><br>
            <h4>My contacts:</h4>
            <span class="glyphicon glyphicon-envelope"></span>
            <a href="mailto:niklevashov@yandex.ru">niklevashov@yandex.ru</a>
            <br>
            <span class="glyphicon glyphicon-user"></span>
            <a href="http://vk.com/nlevashov">vk.com/nlevashov</a>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/docs.min.js"></script>
    <script src="js/objects.js"></script>
  </body>
</html>