new-tool.html

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>OGP toolbox</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet">  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/ogp-style.css">

  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/main.css">

  <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- COMMON HEADER -->
<!-- Main fixed header -->
<header>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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="#">OGPtoolbox</a><p class="navbar-text">tools and use cases for open government</p>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" data-toggle="modal" data-target="#connection">Log In</a></li>
        <button type="button" class="btn btn-default btn-action">Add new</button>
      </ul>
    </div>
  </nav>

  <!-- Navigation bar -->
  <nav class="navbar navbar-inverse">
    <div class="container">
      <!-- Toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="software.html">Tools</a></li>
          <li><a href="platform.html">Examples</a></li>
          <li><a href="organization.html">Organizations</a></li>
          <li><a href="#">Help</a></li>

        </ul>
        <form class="navbar-form navbar-right">
          <div class="form-group search-bar">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span><input type="text" class="form-control" placeholder="Search for a tool, example or organization">
          </div>
        </form>

      </div>
    </div>
  </nav>
</header>
<!-- COMMON HEADER END -->

<!-- BREADCRUMBS -->
<div class="row">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <ol class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li class="active">New Tool</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<!-- MAIN -->

<div class="row section">
  <div class="container">
    <div class="row">
      <div class="col-md-12 content content-left">
        <div class="row">
          <div class="col-xs-12"><h1>Add a new tool</h1></div>
        </div>
      </div>
    </div>


    <div class="row">

      <!-- CONTENT -->
      <div class="col-md-9 content content-left">


        <div class="row">
          <div class="col-xs-12">
            <form>

              <div class="row section-form">
                <div class="col-xs-12">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Name</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="What's the official name of the tool?">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">About</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Add a complete description">
                  </div>
                </div>
              </div>

              <div class="row section-form">
                <div class="col-xs-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Type</label>
                    <select class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                </div>

                <div class="col-xs-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">License</label>
                    <select class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                </div>

                <div class="col-xs-12">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Website link</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter the adress of the informational website">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Download link</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter the adress to download the tool">
                  </div>
                </div>

              </div>

              <div class="row section-form">
                <div class="col-xs-12">

                  <div class="panel panel-default panel-collapse">
                    <div class="panel-heading" role="tab" id="headingTwo" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      <div class="row">
                        <div class="col-xs-8 text-left"><h3 class="panel-title">
                          Additional informations
                        </h3></div>
                        <div class="col-xs-4 text-right"><a class="show-more pull-right">Show more<span class="glyphicon glyphicon-menu-down"></span></a></div>
                      </div>


                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                      <div class="panel-body nomargin">
                        <div class="form-group">
                          <label for="exampleInputEmail1">Release date</label>
                          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="What's the official name of the tool?">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail1">Publisher</label>
                          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="What's the official name of the tool?">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputFile">File input</label>
                          <input type="file" id="exampleInputFile">
                          <p class="help-block">Example block-level help text here.</p>
                        </div>
                        <div class="checkbox">
                          <label>
                            <input type="checkbox"> Check me out
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>


                </div>
              </div>        
            </div>
          </div>

        </div>

        <!-- LEFT SIDEBAR -->
        <div class="col-md-3 sidebar">
          <div class="row">
            <div class="col-xs-12">
              <div class="thumbnail orga grey">
                <div class="upload-container">
                  <label for="exampleInputFile">Logo</label>
                  <div class="upload-zone">
                    <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>Upload image
                  </div>

                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12">
              <i>Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </i>
            </div>
          </div>


        </div>


      </div>
    </div>
  </div>

  <div class="row section-form last">
    <div class="container">
     <div class="col-md-9 content content-left">
      <button type="submit" class="btn btn-default pull-right">Publish tool</button>
    </div>
  </div>
</div>
</form>


<!-- COMMON FOOTER -->
<footer>
  <div class="row section footer">
    <div class="container">
      <div class="row"> 
        <div class="col-xs-12 col-md-6">
          <div class="row">
            <div class="col-xs-6"><img class="footer-logo" src="img/ogp-logo.png" alt="Toolname"> </div>
            <div class="col-xs-6">
              <h4>Language</h4>
              <div class="dropdown dropdown-language">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  English
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Français</a></li>
                  <li><a href="#">Espanol</a></li>

                </ul>
              </div>
            </div>  
          </div>

          <p class="info-box">The Open Government Partnership is a multilateral initiative that aims to secure concrete commitments from governments to promote transparency, empower citizens, fight corruption, and harness new technologies to strengthen governance. In the spirit of multi-stakeholder collaboration, OGP is overseen by a Steering Committee including representatives of governments and civil society organizations.</p></div>
          <div class="col-xs-6 col-md-3">
            <h4>About</h4>
            <ul class="footer-menu">
              <li><a href="#">Eligibility Criteria</a></li>
              <li><a href="#">Develop a National Action Plan</a></li>
              <li><a href="#">Self-Assessment Process</a></li>
              <li><a href="#">Response Policy</a></li>
              <li><a href="#">Civil Society Engagement</a></li>
              <li><a href="#">Calendars and Deadlines</a></li>
            </ul>
          </div>
          <div class="col-xs-6 col-md-3">
            <h4>How it works</h4>
            <ul class="footer-menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages</a></li>
            </ul>
          </div>
        </div>
        <div class="row copyright">
          <div class="col-md-12">© 2016 Open Government Partnership</div>
        </div>

      </div>
    </div>
  </footer>

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


<!-- /container -->        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

<script src="js/vendor/bootstrap.min.js"></script>

<script src="js/main.js">
<script src="js/main.js">
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>