src/popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="styles/css/style.css"/>
</head>
<body id="popup-body">
<div id="login">
<button id="login-btn" class="button">Login</button>
</div>
<div id="popup-content">
<div id="feedly">
<div id="feedly-flex">
<div id="feedly-section">
<a href="#" id="feedly-logo"></a><a href="#" id="website"></a>
</div>
<div id="tabs-container">
<div class="tabs-slider-container">
<input type="checkbox" class="tabs-slider" id="tabs-checkbox">
<span class="tabs-label-unselected-left glyphicon glyphicon-menu-hamburger"></span>
<div class="tabs-trail">
<div class="tabs-selected-bg">
<span class="tabs-label-selected-left glyphicon glyphicon-menu-hamburger"></span>
<span class="tabs-label-selected-right glyphicon glyphicon-time"></span>
</div>
</div>
<span class="tabs-label-unselected-right glyphicon glyphicon-time"></span>
</div>
</div>
<div id="popup-actions">
<em class="menu-glyphicon glyphicon glyphicon-share" id="open-all-news"><div class="arrow-up"></div><span></span></em>
<em class="menu-glyphicon glyphicon glyphicon-share icon-unsaved" id="open-unsaved-all-news"><div class="arrow-up"></div><span></span></em>
<em class="menu-glyphicon glyphicon glyphicon-ok" id="mark-all-read"><div class="arrow-up"></div><span></span></em>
<em class="menu-glyphicon glyphicon glyphicon-filter" id="mark-read-engagement"><div class="arrow-up"></div><span></span></em>
<em class="menu-glyphicon glyphicon glyphicon-refresh icon-refresh" id="update-feeds"><div class="arrow-up"></div><span></span></em>
</div>
</div>
</div>
<div id="feed"></div>
<div id="feed-saved"></div>
<div id="feed-empty"></div>
<div id="loading">
<img src="/images/loading.svg" alt="loading...">
</div>
</div>
</body>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/mustache.min.js"></script>
<script id="feedTemplate" type="text/x-handlebars-template">
<div class="items">
{{#feeds}}
<div class="item" data-id="{{id}}" data-categories="{{#categories}}{{encodedId}} {{/categories}}">
<span class="article-title {{titleDirection}}">
<a data-link="{{url}}" class="title">{{{title}}}</a>
</span>
<span class="article-menu">
<span class="menu-glyphicon glyphicon glyphicon-bookmark save-feed {{#isSaved}} saved {{/isSaved}}" data-saved="{{isSaved}}"></span>
<span class="menu-glyphicon glyphicon glyphicon-eye-open mark-read" title="Mark as read"></span>
<span class="menu-glyphicon glyphicon glyphicon-chevron-down show-content" title="Show content"></span>
</span>
<div class="blog-title {{blogTitleDirection}}">
<img class="blog-icon" src="{{blogIcon}}"/>
{{#showEngagement}}
<span class="engagement {{#isEngagementHot}}hot{{/isEngagementHot}} {{#isEngagementOnFire}}on-fire{{/isEngagementOnFire}}">{{engagement}}{{engagementPostfix}}</span>
{{/showEngagement}}
<a data-link="{{blogUrl}}" href="javascript:void(0)">{{blog}},</a>
<span class="timeago" datetime="{{isoDate}}"></span>
</div>
<div class="content">{{>content}}</div>
</div>
{{/feeds}}
</div>
</script>
<script type="text/x-handlebars-template" id="categories-template">
<div class="categories">
<span class="active">All</span>
{{#categories}}
<span data-id="{{encodedId}}">{{label}}</span>
{{/categories}}
</div>
</script>
<script type="text/x-handlebars-template" id="feed-content">
<div class="{{contentDirection}}">
<em class="author">{{author}}</em>
{{{content}}}
</div>
</script>
<script src="scripts/timeago.full.min.js"></script>
<script src="scripts/purify.min.js"></script>
<script src="scripts/popup.js"></script>
</html>