<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png')}}">
        <link href="{{ url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
        <script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
        <script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
        <title>PeARS - {{name}}</title>
    </head>

    <body style="background-image: url('/static/background.png'); background-color:#000000; background-size:100%; background-repeat:no-repeat; background-position:fixed; top:0; left:0;">
    <nav class="navbar navbar-default" style="background-color: #000000;">
    <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>
          <div style="padding-left:20px">
          <a href="{{url_for('search.index')}}"><img src="/static/pears-logo-small-inverse.png" height="80px"></a>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav">
        <li><a href="{{url_for('pages.return_about')}}">About</a></li>
        </ul>
        </div>
    </div>
    </nav>

    <div class="container">

        <div  class="row">
            <div class="col-md-6">
            <div style="background-color:#fff; color:#000; padding:20px;  border-radius:5px">
            <hr>
            <h3>What is PeARS?</h3>
            <hr>
            PeARS (Peer-to-peer Agent for Reciprocated Search) is a search engine that you can run locally from your browser. It allows you to 'index' pages (i.e. to produce a computer-readable representation of the pages' content, essential to the search process), and to search pages that you or your friends have indexed. Search happens entirely on your machine, meaning that no one knows what you are searching and when. Want to know more? Visit the website at <a href="https://pearsearch.org/index.html">https://pearsearch.org/index.html</a> and install PeARS Orchard from <a href="https://github.com/PeARSearch/PeARS-orchard">GitHub</a>.<br><br>
            <hr>
            <h3>What is a pod?</h3>
            <hr>
            A PeARS pod is a searchable index of Web pages. PeARS makes it very easy to create pods to share with your friends, in the form of text files or images. If you want to really look like a search engine, however, you'll have to do a little more work. The page you are visiting now is just an example of what a PeARS pod looks like when given a fixed online presence with a URL. Feel free to create your own -- it's not that hard! If you want to know more, head over to <a href="">https://github.com/PeARSearch/PeARS-pod</a>.
            </div>
        </div>
            
       <div class="container">
            <div style="background-color: #fff; position:fixed; right:4px; bottom:4px; border-radius:3px; padding: 3px" class="btn btn-lg" data-toggle="popover" title="<b>Background image</b>" data-content="<a href='https://www.flickr.com/photos/alanandanders/3975295765/'>tolmer</a> by <br>Flickr user Alan Lam - <a href='https://creativecommons.org/licenses/by-nd/2.0/'>CC-BY-ND 2.0</a>" data-placement="top" data-html="true">
                <img src="/static/camera_lens.png" width="30px"/><b> Credit</b>
            </div>
       </div>

       <script>
       $(document).ready(function(){
       $('[data-toggle="popover"]').popover({container: 'body'});   
       });
       </script>

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