index.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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Sample App</title>

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">

    <link href="force_view.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="row force-view">
      <div class="btn-group btn-group-justified" role="group" aria-label="...">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-success btn-lg add-node">Add Node</button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#helpModal">Help</button>
        </div>
      </div>

      <div id="chart"></div>
      <center>
        <div class="alert alert-info" role="alert">
         <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
         <a href="https://github.com/igorlima/graph-data-with-mongodb">Fork me</a>
         <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
        </div>
      </center>
    </div>
   
    <!-- Edit Node Modal -->
    <div class="modal fade" id="editNodeModal" 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-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">You're adding a node</h4>
          </div>
          <div class="modal-body">

            <div class="form-group">
              <label for="textNode">Text</label>
              <input type="text" class="form-control" id="textNode" placeholder="Type a text for your node">
            </div>
            <div class="form-group">
              <label for="textColorNode">Text color</label>
              <input type="text" class="form-control" id="textColorNode" placeholder="Choose a text color">
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Help Modal -->
    <div class="modal fade" id="helpModal" 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-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Help</h4>
          </div>
          <div class="modal-body">

            Drag from an existing node to add a new node or link. Click to select/deselect nodes/links. Hit the DELETE key to remove the selected node or link. Drag to pan. Scroll to zoom.
            <br>
            Double click to edit the node content.

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <script data-main="main" src="bower_components/requirejs-bower/require.js"></script>
  </body>
</html>