popup.html

<!DOCTYPE html>
<html>
    <head>
        <title>Selenium Page Object Generator</title>
        <link rel="stylesheet" href="assets/css/popup.css"/>
    </head>
    <body>
        <header>
            <img src="assets/icons/icon48.png"/>
            <span>Page Object Generator</span>
        </header>
        <div class="preloader separator"></div>
        <fieldset>
            <legend>Target</legend>
            <select id="target"></select>
            <button class="generate"><span class="fa fa-download"></span>Generate</button>
            <a class="downloader"></a>
        </fieldset>
        <fieldset>
            <legend>Settings</legend>
            <ul>
                <li>
                    <label for="model.name">Page Name:</label>
                    <input type="text" id="model.name" value="" placeholder="PageName (no spaces)" />
                </li>
                <li>
                    <label for="model.target">Destination Page Name:</label>
                    <input type="text" id="model.target" value="" placeholder="DestinationName (optional)"/>
                </li>
            </ul>
            <button class="options"><span class="fa fa-bars"></span>Options</button>
        </fieldset>
        <fieldset class="share last">
            <legend>Share</legend>
            <a class="fa fa-envelope" title="Share this extension via email"></a>
            <a class="fa fa-twitter" title="Share this extension on Twitter"></a>
            <a class="fa fa-facebook" title="Share this extension on Facebook"></a>
            <a class="fa fa-google-plus" title="Share this extension on Google Plus"></a>
            <!--<a class="fa fa-pinterest"></a>-->
            <a class="fa fa-linkedin" title="Share this extension on LinkedIn"></a>
            <a class="fa fa-star" title="Rate this extension on Chrome Web Store"></a>
        </fieldset>
        <script src="assets/js/popup.js"></script>
    </body>
</html>