maciakl/imaginary-pictures

View on GitHub
app/index.html

Summary

Maintainability
Test Coverage
<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>imaginary.pics</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="shortcut icon" href="/favicon.ico">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <!-- build:css styles/vendor.css -->
        <!-- bower:css -->
        <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
        <!-- endbower -->
        <!-- endbuild -->
        <!-- build:css(.tmp) styles/main.css -->
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
        <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <!--[if lt IE 10]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser.
            Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->


        <div class="container">
            <div class="header">
                <ul class="nav nav-pills pull-right">
                    <li>
                    <button class="btn btn-default" data-toggle="modal" data-target="#myModal">
                        <span class="glyphicon glyphicon-question-sign"></span>
                        About
                    </button></li>
                </ul>
                <h1 class="title">imaginary.pics</h1>
                <h4 class="text-muted">fantasy heroes, monsters & landscapes</h4>
            </div>

            <div class="row marketing" id="images">
            </div>

            <!--
            <h3>More Pictures</h3>
            <p><small>Hover to see the title, click to open the original in a new tab.</small></p>

            <div class="row marketing" id="thumbs">
            </div>
            -->

            <div class="footer">
                <p><span class="glyphicon glyphicon-copyright-mark"></span> 
                2014 <a href="http://maciak.net">Luke</a></p>
            </div>

        </div>

        <!-- About Page -->
        <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">
                  <span class="glyphicon glyphicon-question-sign"></span>
                  About <strong class="title">imaginary.pics</strong></h3>
            </div>
            <div class="modal-body">

                <p>This gallery is dynamically generated based on user submissions
                to hand picked list of fantasy themed picture subreddits. All of
                the images you see on this page have been submitted and upvoted
                by reddit users.</p>

                <p>Below each picture, you can see link to the Reddit discussion
                thread, number of upvotes, name of the
                Reddit user who submitted the it, as well as a link to the
                original image.</p>

                <p>At the moment this gallery only scrapes direct image links,
                and links to Imgur and DeviantArt pictue pages. Posts linking
                to galleries or videos are skipped.</p>

                <p>The source code for <strong class="title">imaginary.pics</strong>
                is available on github:</p>

                <p><a href="https://github.com/maciakl/imaginary-pictures"
                    class="btn btn-lg btn-default">
                    <span class="fa fa-github"></span>
                    imaginary-pictures
                </a></p>

                <p>You can contact the author at
                <span class="fa fa-twitter"></span> <a href="http://twitter.com/LukeMaciak">
                    @LukeMaciak</a>.</p>

                <small class="text-muted">If you know a good fantasy art subreddit that does not
                seem to be represented here, please suggest it via twitter.</small>

            </div>
            <div class="modal-footer">
                <!-- modal footer stuff -->
            </div>
          </div>
        </div>
      </div>

        <!-- build:js scripts/vendor.js -->
        <!-- bower:js -->
        <script src="../bower_components/jquery/dist/jquery.js"></script>
        <!-- endbower -->
        <!-- endbuild -->

        <!-- 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');ga('send','pageview');
        </script>

        <!-- build:js scripts/plugins.js -->
        <script src="../bower_components/bootstrap/js/affix.js"></script>
        <script src="../bower_components/bootstrap/js/alert.js"></script>
        <script src="../bower_components/bootstrap/js/dropdown.js"></script>
        <script src="../bower_components/bootstrap/js/tooltip.js"></script>
        <script src="../bower_components/bootstrap/js/modal.js"></script>
        <script src="../bower_components/bootstrap/js/transition.js"></script>
        <script src="../bower_components/bootstrap/js/button.js"></script>
        <script src="../bower_components/bootstrap/js/popover.js"></script>
        <script src="../bower_components/bootstrap/js/carousel.js"></script>
        <script src="../bower_components/bootstrap/js/scrollspy.js"></script>
        <script src="../bower_components/bootstrap/js/collapse.js"></script>
        <script src="../bower_components/bootstrap/js/tab.js"></script>
        <!-- endbuild -->

        <!-- build:js({app,.tmp}) scripts/main.js -->
        <script src="scripts/main.js"></script>
        <!-- endbuild -->
</body>
</html>