From 9a6fe2bf696c4c364518159735f4f5d12c666681 Mon Sep 17 00:00:00 2001
From: Cédric Bonhomme <kimble.mandel@gmail.com>
Date: Fri, 15 Mar 2013 08:20:00 +0100
Subject: Reaorganization of folders for the CSS, templates and pictures.

---
 source/static/css/log.css                  |  60 ++++++++
 source/static/css/style.css                | 234 +++++++++++++++++++++++++++++
 source/static/img/blogmarks.png            | Bin 0 -> 195 bytes
 source/static/img/check-news.png           | Bin 0 -> 1383 bytes
 source/static/img/cross.png                | Bin 0 -> 655 bytes
 source/static/img/diaspora.png             | Bin 0 -> 1179 bytes
 source/static/img/digg.png                 | Bin 0 -> 358 bytes
 source/static/img/email-follow.png         | Bin 0 -> 4056 bytes
 source/static/img/favicon.png              | Bin 0 -> 6879 bytes
 source/static/img/feed-icon-28x28.png      | Bin 0 -> 1737 bytes
 source/static/img/following-article.png    | Bin 0 -> 989 bytes
 source/static/img/hacker-news.png          | Bin 0 -> 265 bytes
 source/static/img/heart-32x32.png          | Bin 0 -> 2084 bytes
 source/static/img/heart.png                | Bin 0 -> 634 bytes
 source/static/img/heart_open.png           | Bin 0 -> 687 bytes
 source/static/img/history.png              | Bin 0 -> 3257 bytes
 source/static/img/identica.png             | Bin 0 -> 459 bytes
 source/static/img/logout.png               | Bin 0 -> 1800 bytes
 source/static/img/management.png           | Bin 0 -> 2916 bytes
 source/static/img/mark-as-read.png         | Bin 0 -> 1762 bytes
 source/static/img/pinboard.png             | Bin 0 -> 597 bytes
 source/static/img/previous-article.png     | Bin 0 -> 997 bytes
 source/static/img/reddit.png               | Bin 0 -> 525 bytes
 source/static/img/scoopeo.png              | Bin 0 -> 295 bytes
 source/static/img/tuxrss.png               | Bin 0 -> 6879 bytes
 source/static/img/unread.png               | Bin 0 -> 1580 bytes
 source/static/templates/article.html       |  58 +++++++
 source/static/templates/articles.html      |  39 +++++
 source/static/templates/base.html          |  28 ++++
 source/static/templates/confirmation.html  |   5 +
 source/static/templates/error.html         |   5 +
 source/static/templates/favorites.html     |  30 ++++
 source/static/templates/feed.html          | 138 +++++++++++++++++
 source/static/templates/history.html       |  80 ++++++++++
 source/static/templates/inactives.html     |  15 ++
 source/static/templates/index.html         | 107 +++++++++++++
 source/static/templates/languages.html     |  25 +++
 source/static/templates/management.html    |  80 ++++++++++
 source/static/templates/notifications.html |  18 +++
 source/static/templates/plain_text.html    |   5 +
 source/static/templates/search.html        |  53 +++++++
 source/static/templates/statistics.html    |  14 ++
 source/static/templates/unread.html        |  76 ++++++++++
 43 files changed, 1070 insertions(+)
 create mode 100644 source/static/css/log.css
 create mode 100755 source/static/css/style.css
 create mode 100755 source/static/img/blogmarks.png
 create mode 100644 source/static/img/check-news.png
 create mode 100644 source/static/img/cross.png
 create mode 100644 source/static/img/diaspora.png
 create mode 100755 source/static/img/digg.png
 create mode 100644 source/static/img/email-follow.png
 create mode 100644 source/static/img/favicon.png
 create mode 100755 source/static/img/feed-icon-28x28.png
 create mode 100644 source/static/img/following-article.png
 create mode 100644 source/static/img/hacker-news.png
 create mode 100644 source/static/img/heart-32x32.png
 create mode 100644 source/static/img/heart.png
 create mode 100644 source/static/img/heart_open.png
 create mode 100644 source/static/img/history.png
 create mode 100644 source/static/img/identica.png
 create mode 100644 source/static/img/logout.png
 create mode 100644 source/static/img/management.png
 create mode 100644 source/static/img/mark-as-read.png
 create mode 100644 source/static/img/pinboard.png
 create mode 100644 source/static/img/previous-article.png
 create mode 100755 source/static/img/reddit.png
 create mode 100755 source/static/img/scoopeo.png
 create mode 100644 source/static/img/tuxrss.png
 create mode 100644 source/static/img/unread.png
 create mode 100644 source/static/templates/article.html
 create mode 100644 source/static/templates/articles.html
 create mode 100644 source/static/templates/base.html
 create mode 100644 source/static/templates/confirmation.html
 create mode 100644 source/static/templates/error.html
 create mode 100644 source/static/templates/favorites.html
 create mode 100644 source/static/templates/feed.html
 create mode 100644 source/static/templates/history.html
 create mode 100644 source/static/templates/inactives.html
 create mode 100644 source/static/templates/index.html
 create mode 100644 source/static/templates/languages.html
 create mode 100644 source/static/templates/management.html
 create mode 100644 source/static/templates/notifications.html
 create mode 100644 source/static/templates/plain_text.html
 create mode 100644 source/static/templates/search.html
 create mode 100644 source/static/templates/statistics.html
 create mode 100644 source/static/templates/unread.html

(limited to 'source/static')

diff --git a/source/static/css/log.css b/source/static/css/log.css
new file mode 100644
index 00000000..9ffd499a
--- /dev/null
+++ b/source/static/css/log.css
@@ -0,0 +1,60 @@
+body {
+    font:normal medium 'Gill Sans','Gill Sans MT',Verdana,sans-serif;
+    line-height:1.75;
+}
+
+a:link {
+    color:#1c73b7;
+    text-decoration:none;
+    outline:0;
+}
+
+a:visited {
+    color:#1c73b7;
+    text-decoration:none;
+    outline:0;
+}
+
+a:active {
+    color:#1c73b7;
+    text-decoration:none;
+    outline:0;
+}
+
+h1 {
+    font-size:x-large;
+    color:#0c85e5;
+}
+
+h2 {
+   font-size:medium;
+}
+
+h3 {
+    font-size:small;
+}
+
+hr {
+    der-style:dotted;
+    height:1px;
+    border-width: 1px 0 0 0;
+    margin:1.45em 0 1.4em;
+    padding:0;
+}
+
+#logform {
+   text-align:center;
+   clear: both;
+   position: float;
+   margin-top: 10%;
+}
+
+#footer {
+   clear:both;
+   text-align:center;
+   font-size:small
+}
+
+img {
+    border:0;
+}
diff --git a/source/static/css/style.css b/source/static/css/style.css
new file mode 100755
index 00000000..86036357
--- /dev/null
+++ b/source/static/css/style.css
@@ -0,0 +1,234 @@
+html, body {
+    margin: 0px 0px 0px 5px;
+    padding: 0px 0px 0px 0px;
+    height: 100%;
+    overflow-x: hidden;
+    background-color: white;
+    color: black;
+    text-align: justify;
+    font: normal small 'Gill Sans','Gill Sans MT',Verdana,sans-serif;
+}
+
+img {
+    border: 0px;
+}
+
+h1 {
+    font-size: 100%;
+    margin: 0em 0em;
+    padding: 0px;
+}
+
+h2 {
+    margin: 0.0em 0em;
+    padding: 0px;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: bold;
+    font-size: 100%;
+    letter-spacing: 0em;
+    text-align: right;
+}
+
+h3 {
+    margin: 0em 0em 0.5em 0em;
+    font-size: 100%;
+    font-weight: bold;
+    text-align: left;
+}
+
+h1 a, h2 a, h3 a {
+    text-decoration: none;
+}
+
+a:link, a:visited {
+    color: #003399;
+    text-decoration:none
+}
+
+a:hover {
+    color: blue;
+}
+
+hr {
+    color: white;
+    border-top: dotted black;
+    border-width: 1px 0px 0px 0px;
+    margin: 1em 0em;
+}
+
+/* Menu */
+.menu_container {
+    position:fixed;
+    margin:0px;
+    padding:0px;
+    z-index:4;
+}
+
+/* Navigation bars */
+.nav_container {
+    position:fixed;
+    top:112px;
+    right:5px;
+    margin:0px;
+    padding:0px;
+    white-space:nowrap;
+    z-index:3;
+    clear:both;
+}
+.nav_container.horizontal {
+    position:absolute;
+    white-space:normal;
+    z-index:4;
+    width:*;
+}
+.nav_container.horizontal div {
+    float:right;
+    padding-right:10px;
+}
+
+#nav {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    z-index: 2;
+}
+
+#heading, #nav ul, #nav li {
+    background: #EEEEEE;
+    color: inherit;
+    border-bottom: 0px solid black;
+}
+
+#heading h1 {
+    margin: 0;
+    padding: 0.4em 0 0.4em 2em;
+    white-space: nowrap;
+}
+
+#nav ul {
+    display: block;
+    margin: 0em 0em 0em 0em;
+    border-right: 0px solid #000000;
+}
+
+#nav li {
+    margin: 0em;
+    padding: 0.1em 0em 0.2em 0.1em;
+    display: block;
+    float: left;
+    border-left: 0px solid #000000;
+}
+
+.right {
+    clear: right;
+    float: right;
+    text-align: right;
+    margin: 0em 1em 0em 1em;
+    max-width: 25%;
+}
+
+img.right {
+    width: auto;
+}
+
+.inner .right {
+    margin-right: 0em;
+}
+
+.right blockquote {
+    float: right;
+    position: relative;
+    clear: both;
+    padding-top: 1em;
+    padding-bottom: 0em;
+    margin-bottom: 0em;
+    font-style: italic;
+    width: 100%;
+    margin-right: 0em;
+}
+
+blockquote.right {
+    width: 50%;
+    margin-left: 50%;
+    margin-right: 0em;
+}
+
+/* Footer (W3C logos) */
+
+#w3c {
+    text-align: right;
+    padding: 0em 2em 0em 2em;
+    clear: both;
+}
+
+#w3c img {
+    padding-left: 10px;
+    padding-top: 1em;
+}
+
+/* Classes */
+
+.clear {
+    font-size: 1px;
+    height: 0px;
+    clear: both;
+}
+
+.invisible {
+    display: none;
+}
+
+.inner {
+    margin-top: 1em;
+    padding: 0em 0em 0em 0em;
+    clear: both;
+}
+
+.innerlogo {
+    margin-top: 0em;
+    padding: 0em 0em 0em 1em;
+    clear: both;
+}
+
+.left {
+    float: left;
+    position: absolute;
+}
+
+.tex {
+    position: relative; top: 0.2em;
+    margin-left: -0.2em;
+    margin-right: -0.1em;
+}
+
+/* CSS ToolTips */
+.tooltip {
+    color: #FFF;
+    outline: none;
+    text-decoration: none;
+    position: relative;
+}
+
+.tooltip span {
+    color: #FFF;
+    margin-left: -999em;
+    position: absolute;
+}
+
+.tooltip:hover span {
+    border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
+    font-family: Calibri, Tahoma, Geneva, sans-serif;
+    position: absolute; left: 1em; top: 2em; z-index: 99;
+    margin-left: 0; width: 250px;
+}
+.classic {
+    padding: 0.8em 1em;
+    background: rgba(0, 0, 0, 0.85);
+    border: 5px 5px;
+}
+
+* html a:hover {
+    background: transparent;
+}
\ No newline at end of file
diff --git a/source/static/img/blogmarks.png b/source/static/img/blogmarks.png
new file mode 100755
index 00000000..2464e5bb
Binary files /dev/null and b/source/static/img/blogmarks.png differ
diff --git a/source/static/img/check-news.png b/source/static/img/check-news.png
new file mode 100644
index 00000000..cce7df39
Binary files /dev/null and b/source/static/img/check-news.png differ
diff --git a/source/static/img/cross.png b/source/static/img/cross.png
new file mode 100644
index 00000000..1514d51a
Binary files /dev/null and b/source/static/img/cross.png differ
diff --git a/source/static/img/diaspora.png b/source/static/img/diaspora.png
new file mode 100644
index 00000000..fdf8bb72
Binary files /dev/null and b/source/static/img/diaspora.png differ
diff --git a/source/static/img/digg.png b/source/static/img/digg.png
new file mode 100755
index 00000000..097c4600
Binary files /dev/null and b/source/static/img/digg.png differ
diff --git a/source/static/img/email-follow.png b/source/static/img/email-follow.png
new file mode 100644
index 00000000..4505c610
Binary files /dev/null and b/source/static/img/email-follow.png differ
diff --git a/source/static/img/favicon.png b/source/static/img/favicon.png
new file mode 100644
index 00000000..d4d38473
Binary files /dev/null and b/source/static/img/favicon.png differ
diff --git a/source/static/img/feed-icon-28x28.png b/source/static/img/feed-icon-28x28.png
new file mode 100755
index 00000000..d64c669c
Binary files /dev/null and b/source/static/img/feed-icon-28x28.png differ
diff --git a/source/static/img/following-article.png b/source/static/img/following-article.png
new file mode 100644
index 00000000..0e59e459
Binary files /dev/null and b/source/static/img/following-article.png differ
diff --git a/source/static/img/hacker-news.png b/source/static/img/hacker-news.png
new file mode 100644
index 00000000..ce92765d
Binary files /dev/null and b/source/static/img/hacker-news.png differ
diff --git a/source/static/img/heart-32x32.png b/source/static/img/heart-32x32.png
new file mode 100644
index 00000000..09b01cb5
Binary files /dev/null and b/source/static/img/heart-32x32.png differ
diff --git a/source/static/img/heart.png b/source/static/img/heart.png
new file mode 100644
index 00000000..f36f3cfd
Binary files /dev/null and b/source/static/img/heart.png differ
diff --git a/source/static/img/heart_open.png b/source/static/img/heart_open.png
new file mode 100644
index 00000000..e1c6e027
Binary files /dev/null and b/source/static/img/heart_open.png differ
diff --git a/source/static/img/history.png b/source/static/img/history.png
new file mode 100644
index 00000000..2a57cc17
Binary files /dev/null and b/source/static/img/history.png differ
diff --git a/source/static/img/identica.png b/source/static/img/identica.png
new file mode 100644
index 00000000..18b5bd2b
Binary files /dev/null and b/source/static/img/identica.png differ
diff --git a/source/static/img/logout.png b/source/static/img/logout.png
new file mode 100644
index 00000000..55316f8b
Binary files /dev/null and b/source/static/img/logout.png differ
diff --git a/source/static/img/management.png b/source/static/img/management.png
new file mode 100644
index 00000000..7bcbc384
Binary files /dev/null and b/source/static/img/management.png differ
diff --git a/source/static/img/mark-as-read.png b/source/static/img/mark-as-read.png
new file mode 100644
index 00000000..ffc90910
Binary files /dev/null and b/source/static/img/mark-as-read.png differ
diff --git a/source/static/img/pinboard.png b/source/static/img/pinboard.png
new file mode 100644
index 00000000..6dddc10b
Binary files /dev/null and b/source/static/img/pinboard.png differ
diff --git a/source/static/img/previous-article.png b/source/static/img/previous-article.png
new file mode 100644
index 00000000..fcd9bfd8
Binary files /dev/null and b/source/static/img/previous-article.png differ
diff --git a/source/static/img/reddit.png b/source/static/img/reddit.png
new file mode 100755
index 00000000..2d615f2a
Binary files /dev/null and b/source/static/img/reddit.png differ
diff --git a/source/static/img/scoopeo.png b/source/static/img/scoopeo.png
new file mode 100755
index 00000000..052c7dc8
Binary files /dev/null and b/source/static/img/scoopeo.png differ
diff --git a/source/static/img/tuxrss.png b/source/static/img/tuxrss.png
new file mode 100644
index 00000000..d4d38473
Binary files /dev/null and b/source/static/img/tuxrss.png differ
diff --git a/source/static/img/unread.png b/source/static/img/unread.png
new file mode 100644
index 00000000..d3a641c7
Binary files /dev/null and b/source/static/img/unread.png differ
diff --git a/source/static/templates/article.html b/source/static/templates/article.html
new file mode 100644
index 00000000..bd459c4e
--- /dev/null
+++ b/source/static/templates/article.html
@@ -0,0 +1,58 @@
+## article.html
+<%inherit file="base.html"/>
+<div>
+    <div style="width: 50%; overflow:hidden; text-align: justify; margin:0 auto">
+        <h1><i>${article["article_title"]}</i> from <a href="/feed/${feed['feed_id']}">${feed["feed_title"]}</a></h1>
+        <br />
+        %if article["article_like"]:
+            <a href="/like/0:${feed['feed_id']}:${article['article_id']}"><img src="/img/heart.png" title="I like this article!" /></a>
+        %else:
+            <a href="/like/1:${feed['feed_id']}:${article['article_id']}"><img src="/img/heart_open.png" title="Click if you like this article." /></a>
+        %endif
+        &nbsp;&nbsp;<a href="/delete_article/${feed['feed_id']}:${article['article_id']}"><img src="/img/cross.png" title="Delete this article" /></a>
+        <br /><br />
+
+        ${description}
+
+        <div style="float:right;"><a href="/article/${feed['feed_id']}:${following['article_id']}" title="${following['article_title']}"><img src="/img/following-article.png" /></a></div>
+        <div style="float:left;"><a href="/article/${feed['feed_id']}:${previous['article_id']}" title="${previous['article_title']}"><img src="/img/previous-article.png" /></a></div>
+        </div>
+
+        <hr />
+        <a href="/plain_text/${feed['feed_id']}:${article['article_id']}">Plain text</a>
+        - <a href="/epub/${feed['feed_id']}:${article['article_id']}">Export to EPUB</a>
+        <br />
+        <a href="${article['article_link']}">Complete story</a>
+        <br />
+
+        Share this article:<br />
+        <a href="javascript:(function(){f='https://${diaspora}/bookmarklet?url=${article['article_link']}&amp;title=${article['article_title']}&amp;notes=via pyAggr3g470r&amp;v=1&amp;';a=function(){if(!window.open(f+'noui=1&amp;jump=doclose','diasporav1','location=yes,links=no,scrollbars=no,toolbar=no,width=620,height=250'))location.href=f+'jump=yes'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()">
+                <img src="/img/diaspora.png" title="Share on Diaspora" /></a>
+
+        <a href="http://identi.ca/index.php?action=newnotice&status_textarea=${article['article_title']}:${article['article_link']}" title="Share on Identi.ca" target="_blank"><img src="/img/identica.png" /></a>
+
+        <a href="https://api.pinboard.in/v1/posts/add?url=${article['article_link']}&description=${article['article_title']}"
+                rel="noreferrer" target="_blank">
+                <img src="/img/pinboard.png" title="Share on Pinboard" /></a>
+
+        <a href="http://digg.com/submit?url=${article['article_link']}&title=${article['article_title']}"
+                rel="noreferrer" target="_blank">
+                <img src="/img/digg.png" title="Share on Digg" /></a>
+
+        <a href="http://reddit.com/submit?url=${article['article_link']}&title=${article['article_title']}"
+                rel="noreferrer" target="_blank">
+                <img src="/img/reddit.png" title="Share on reddit" /></a>
+
+        <a href="http://scoopeo.com/scoop/new?newurl=${article['article_link']}&title=${article['article_title']}"
+                rel="noreferrer" target="_blank">
+                <img src="/img/scoopeo.png" title="Share on Scoopeo" /></a>
+
+        <a href="http://blogmarks.net/my/new.php?url=${article['article_link']}&title=${article['article_title']}"
+                rel="noreferrer" target="_blank">
+                <img src="/img/blogmarks.png" title="Share on Blogmarks" /></a>
+
+        <g:plusone size="standard" count="true" href="${article['article_link']}"></g:plusone>
+
+
+        <br />
+        <a href="/var/qrcode/${article['article_id']}.png"><img src="/var/qrcode/${article['article_id']}.png" title="Share with your smartphone" width="500" height="500" /></a>
\ No newline at end of file
diff --git a/source/static/templates/articles.html b/source/static/templates/articles.html
new file mode 100644
index 00000000..cbba2508
--- /dev/null
+++ b/source/static/templates/articles.html
@@ -0,0 +1,39 @@
+## articles.html
+<%inherit file="base.html"/>
+<%
+import utils
+%>
+<div class="right inner">
+    <a href="/mark_as_read/Feed:${feed['feed_id']}">Mark all articles from this feed as read</a>
+    <br />
+    <form method=get action="/search/Feed${feed['feed_id']}">
+        <input type="search" name="query" value="" placeholder="Search this feed" maxlength=2048 autocomplete="on">
+    </form>
+    <hr />
+</div>
+
+<div class="left inner">
+    <h1>Articles of the feed <i><a href="/feed/${feed['feed_id']}">${feed['feed_title']}</a></i></h1>
+    <br />
+    %for article in articles:
+        <%
+            if article["article_readed"] == False:
+                not_read_begin, not_read_end = "<b>", "</b>"
+            else:
+                not_read_begin, not_read_end = "", ""
+
+            if article["article_like"] == True:
+                like = """ <img src="/img/heart.png" title="I like this article!" />"""
+            else:
+                like = ""
+
+            article_content = utils.clear_string(article["article_content"])
+            if article_content:
+                description = " ".join(article_content[:500].split(' ')[:-1])
+            else:
+                description = "No description."
+        %>
+        ${article["article_date"].strftime('%Y-%m-%d %H:%M')} - <a class="tooltip" href="/article/${feed['feed_id']}:${article['article_id']}" rel="noreferrer" target="_blank">${not_read_begin}${article["article_title"][:150]}${not_read_end}<span class="classic">${description}</span></a>
+        <br />
+    %endfor
+    <h4><a href="/">All feeds</a></h4>
\ No newline at end of file
diff --git a/source/static/templates/base.html b/source/static/templates/base.html
new file mode 100644
index 00000000..aa375470
--- /dev/null
+++ b/source/static/templates/base.html
@@ -0,0 +1,28 @@
+## base.html
+<!DOCTYPE html>
+<html>
+<head>
+   <meta charset="utf-8" />
+    %if header_text is UNDEFINED:
+        <title>pyAggr3g470r</title>
+    %elif header_text == 0:
+        <title>pyAggr3g470r</title>
+    %else:
+        <title>${header_text} - pyAggr3g470r</title>
+    %endif
+    <link rel="stylesheet" href="/css/style.css" />
+    <script src="https://apis.google.com/js/plusone.js"></script>
+</head>
+<body>
+    <div class="right innerlogo">
+        <a href="/"><img src="/img/tuxrss.png" title="What's new today?"/></a>
+    </div>
+    <a href="/"><h1 id="top">pyAggr3g470r</h1></a>
+    ${self.body()}
+    <hr />
+    <p>This software is under GPLv3 license. You are welcome to copy, modify or
+    redistribute the source code according to the <a href="http://www.gnu.org/licenses/gpl-3.0.txt">GPLv3</a> license.<br />
+    <a href="https://bitbucket.org/cedricbonhomme/pyaggr3g470r/" rel="noreferrer" target="_blank">Source code</a> of pyAggr3g470r.</p>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/source/static/templates/confirmation.html b/source/static/templates/confirmation.html
new file mode 100644
index 00000000..ae206838
--- /dev/null
+++ b/source/static/templates/confirmation.html
@@ -0,0 +1,5 @@
+## confirmation.html
+<%inherit file="base.html"/>
+<div class="left inner">
+    <h1>Your request processed successfully:</h1>
+    <p>${message}</p>
diff --git a/source/static/templates/error.html b/source/static/templates/error.html
new file mode 100644
index 00000000..3790d3e9
--- /dev/null
+++ b/source/static/templates/error.html
@@ -0,0 +1,5 @@
+## error.html
+<%inherit file="base.html"/>
+<div class="left inner">
+    <h1>An error occured:</h1>
+    ${message}
\ No newline at end of file
diff --git a/source/static/templates/favorites.html b/source/static/templates/favorites.html
new file mode 100644
index 00000000..4dd17b6b
--- /dev/null
+++ b/source/static/templates/favorites.html
@@ -0,0 +1,30 @@
+## favorites.html
+<%inherit file="base.html"/>
+<%
+import utils
+%>
+<div class="left inner">
+    <h1>Your favorites articles (${sum([elem.count() for elem in  articles.values()])})</h1>
+    %for feed in feeds:
+        <%
+            new_feed_section = True
+        %>
+        %for article in articles[feed["feed_id"]]:
+            <%
+                if new_feed_section:
+                    new_feed_section = False
+                    title = """<h2><a name="%s"><a href="%s" rel="noreferrer"target="_blank">%s</a></a><a href="%s" rel="noreferrer" target="_blank"><img src="%s" width="28" height="28" /></a></h2>\n""" % \
+                            (feed["feed_id"], feed["site_link"], feed["feed_title"], feed["feed_link"], feed["feed_image"])
+                else:
+                    title = ""
+                article_content = utils.clear_string(article["article_content"])
+                if article_content:
+                    description = " ".join(article_content[:500].split(' ')[:-1])
+                else:
+                    description = "No description."
+            %>
+            ${title}
+
+            ${article["article_date"].strftime('%Y-%m-%d %H:%M')} - <a class="tooltip" href="/article/${feed['feed_id']}:${article['article_id']}" rel="noreferrer" target="_blank">${article["article_title"][:150]}<span class="classic">${description}</span></a><br />
+        %endfor
+    %endfor
diff --git a/source/static/templates/feed.html b/source/static/templates/feed.html
new file mode 100644
index 00000000..f4a35e77
--- /dev/null
+++ b/source/static/templates/feed.html
@@ -0,0 +1,138 @@
+## feed.html
+<%inherit file="base.html"/>
+<%
+import utils
+%>
+<div class="left inner">
+    <p>The feed <b>${feed['feed_title']}</b> contains <b>${format(nb_articles_feed, ',d')}</b> articles.
+    Representing ${round((nb_articles_feed / nb_articles_total) * 100, 4)} percent of the total (${format(nb_articles_total, ',d')} articles).
+    <br />
+    Address of the feed: <a href="${feed['feed_link']}">${feed['feed_link']}</a>.
+    <br />
+    Address of the site: <a href="${feed['site_link']}">${feed['site_link']}</a>.</p>
+
+    %if articles:
+        <p>${(nb_unread_articles_feed == 0 and ["All articles are read"] or [str(nb_unread_articles_feed) + " unread article" + (nb_unread_articles_feed == 1 and [""] or ["s"])[0]])[0]}.</p>
+    %endif
+
+    %if feed["mail"] == True:
+        <p>
+        You are receiving articles from this feed to the address: <a href="mail:${mail_to}">${mail_to}</a>.
+        <a href="/mail_notification/0:${feed['feed_id']}">Stop</a> receiving articles from this feed.
+        %if not mail_notification_enabled:
+            <br />However e-mail notification is disabled in the configuration file.
+        %endif
+        </p>
+    %endif
+
+    %if articles != []:
+        <p>The last article was posted ${elapsed.days} day(s) ago.<br />
+        Daily average: ${average}, between the ${first_post_date.strftime('%Y-%m-%d')} and the ${end_post_date.strftime('%Y-%m-%d')}.</p>
+
+        <br />
+        <h1>Recent articles</h1>
+        <%
+        html = ""
+        %>
+        %for article in articles:
+            <%
+                if article["article_readed"] == False:
+                    # not readed articles are in bold
+                    not_read_begin, not_read_end = "<b>", "</b>"
+                else:
+                    not_read_begin, not_read_end = "", ""
+
+                # display a heart for faved articles
+                if article["article_like"] == True:
+                    like = """ <img src="/img/heart.png" title="I like this article!" />"""
+                else:
+                    like = ""
+
+                # Descrition for the CSS ToolTips
+                article_content = utils.clear_string(article["article_content"])
+                if article_content:
+                    description = " ".join(article_content[:500].split(' ')[:-1])
+                else:
+                    description = "No description."
+                # Title of the article
+                article_title = article["article_title"]
+                if len(article_title) >= 80:
+                    article_title = article_title[:80] + " ..."
+
+                # a description line per article (date, title of the article and
+                # CSS description tooltips on mouse over)
+                html += article["article_date"].strftime('%Y-%m-%d %H:%M') + " - " + \
+                        """<a class="tooltip" href="/article/%s:%s" rel="noreferrer" target="_blank">%s%s%s<span class="classic">%s</span></a>""" % \
+                                (feed["feed_id"], article["article_id"], not_read_begin, \
+                                article_title, not_read_end, description) + like + "<br />\n"
+            %>
+        %endfor
+        ${html}
+
+        <a href="/articles/${feed['feed_id']}">All articles</a>&nbsp;&nbsp;&nbsp;
+        <br />
+
+        %if nb_favorites != 0:
+            <br /></br />
+            <h1>Your favorites articles for this feed</h1>
+            <%
+                html = ""
+            %>
+            %for article in favorites:
+                <%
+                    #descrition for the CSS ToolTips
+                    article_content = utils.clear_string(article["article_content"])
+                    if article_content:
+                        description = " ".join(article_content[:500].split(' ')[:-1])
+                    else:
+                        description = "No description."
+
+                    # a description line per article (date, title of the article and
+                    # CSS description tooltips on mouse over)
+                    html += article["article_date"].strftime('%Y-%m-%d %H:%M') + " - " + \
+                            """<a class="tooltip" href="/article/%s:%s" rel="noreferrer" target="_blank">%s<span class="classic">%s</span></a><br />\n""" % \
+                                    (feed["feed_id"], article["article_id"], article["article_title"][:150], description)
+                %>
+            %endfor
+            ${html}
+        %endif
+    %else:
+        <p>No articles yet.</p>
+    %endif
+
+
+
+    <br />
+    <h1>Edit this feed</h1>
+    <form method=post action="/change_feed_name/">
+        <input type="text" name="new_feed_name" value="" placeholder="Enter a new name (then press Enter)." maxlength=2048 autocomplete="on" size="50" />
+        <input type="hidden" name="feed_id" value="${feed['feed_id']}" />
+    </form>
+
+    <form method=post action="/change_site_url/">
+        <input type="url" name="new_site_url" value="" placeholder="Enter a new URL for this site (then press Enter)." maxlength=2048 autocomplete="on" size="50" />
+        <input type="hidden" name="feed_id" value="${feed['feed_id']}" />
+        <input type="hidden" name="old_site_url" value="${feed['site_link']}" />
+    </form>
+
+    <form method=post action="/change_feed_url/">
+        <input type="url" name="new_feed_url" value="" placeholder="Enter a new URL in order to retrieve articles (then press Enter)." maxlength=2048 autocomplete="on" size="50" />
+        <input type="hidden" name="feed_id" value="${feed['feed_id']}" />
+        <input type="hidden" name="old_feed_url" value="${feed['feed_link']}" />
+    </form>
+
+    <form method=post action="/change_feed_logo/">
+        <input type="text" name="new_feed_logo" value="" placeholder="Enter the URL of the logo (then press Enter)." maxlength=2048 autocomplete="on" size="50" />
+        <input type="hidden" name="feed_id" value="${feed['feed_id']}" />
+    </form>
+
+
+    %if articles != []:
+        </br />
+        <h1>Tag cloud</h1>
+        <form method=get action="/feed/${feed['feed_id']}">
+            Minimum size of a word:
+            <input type="number" name="word_size" value="${word_size}" min="2" max="15" step="1" size="2">
+        </form>
+        <div style="width: 35%; overflow:hidden; text-align: justify">${tag_cloud}</div>
+    %endif
diff --git a/source/static/templates/history.html b/source/static/templates/history.html
new file mode 100644
index 00000000..e6826032
--- /dev/null
+++ b/source/static/templates/history.html
@@ -0,0 +1,80 @@
+## history.html
+<%inherit file="base.html"/>
+<%
+import utils
+import calendar
+from collections import Counter
+%>
+<div class="left inner">
+    <%
+        html = ""
+        # Get the date from the tag cloud
+        # Format: /history/?query=year:2011-month:06 to get the
+        # list of articles of June, 2011.
+        if query == "all":
+            html += "<h1>Search with tags cloud</h1>\n"
+            html += "<h4>Choose a year</h4>\n"
+        if "year" in query:
+            the_year = query.split('-')[0].split(':')[1]
+            if "month" not in query:
+                html += "<h1>Choose a month for " + the_year + "</h1>\n"
+        if "month" in query:
+            the_month = query.split('-')[1].split(':')[1]
+            html += "<h1>Articles of "+ calendar.month_name[int(the_month)] + ", "+ the_year +".</h1>\n"
+
+        timeline = Counter()
+        for feed in feeds:
+            new_feed_section = True
+            for article in mongo.get_articles(feed["feed_id"]):
+
+                if query == "all":
+                    timeline[article["article_date"].strftime('%Y')] += 1
+
+                elif query[:4] == "year":
+
+                    if article["article_date"].strftime('%Y') == the_year:
+                        timeline[article["article_date"].strftime('%m')] += 1
+
+                        if "month" in query:
+                            if article["article_date"].strftime('%m') == the_month:
+                                if article["article_readed"] == False:
+                                    # not readed articles are in bold
+                                    not_read_begin, not_read_end = "<b>", "</b>"
+                                else:
+                                    not_read_begin, not_read_end = "", ""
+
+                                if article["article_like"] == True:
+                                    like = """ <img src="/img/heart.png" title="I like this article!" />"""
+                                else:
+                                    like = ""
+                                # Descrition for the CSS ToolTips
+                                article_content = utils.clear_string(article["article_content"])
+                                if article_content:
+                                    description = " ".join(article_content[:500].split(' ')[:-1])
+                                else:
+                                    description = "No description."
+                                # Title of the article
+                                article_title = article["article_title"]
+                                if len(article_title) >= 80:
+                                    article_title = article_title[:80] + " ..."
+
+                                if new_feed_section is True:
+                                    new_feed_section = False
+                                    html += """<h2><a name="%s"><a href="%s" rel="noreferrer"
+                                    target="_blank">%s</a></a><a href="%s" rel="noreferrer"
+                                    target="_blank"><img src="%s" width="28" height="28" /></a></h2>\n""" % \
+                                        (feed["feed_id"], feed["site_link"], feed["feed_title"], feed["feed_link"], feed["feed_image"])
+
+                                html += article["article_date"].strftime("%a %d (%H:%M:%S) ") + " - " + \
+                                        """<a class="tooltip" href="/article/%s:%s" rel="noreferrer" target="_blank">%s%s%s<span class="classic">%s</span></a>""" % \
+                                                (feed["feed_id"], article["article_id"], not_read_begin, \
+                                                article_title, not_read_end, description) + like + "<br />\n"
+        if query == "all":
+            query_string = "year"
+        elif "year" in query:
+            query_string = "year:" + the_year + "-month"
+        if "month" not in query:
+            html += '<div style="width: 35%; overflow:hidden; text-align: justify">' + \
+                        utils.tag_cloud([(elem, timeline[elem]) for elem in timeline.keys()], query_string) + '</div>'
+    %>
+    ${html}
\ No newline at end of file
diff --git a/source/static/templates/inactives.html b/source/static/templates/inactives.html
new file mode 100644
index 00000000..57482b61
--- /dev/null
+++ b/source/static/templates/inactives.html
@@ -0,0 +1,15 @@
+## inactives.html
+<%inherit file="base.html"/>
+<div class="left inner">
+    %if inactives != []:
+        <form method=get action="/inactives/">
+            <h1>Feeds with no recent articles since <input type="number" name="nb_days" value="${nb_days}" min="0" max="1000000" step="1" size="4" style="text-align: center" /> days:</h1>
+        </form>
+        <ul>
+        %for item in inactives:
+            <li><a href="/feed/${item[0]["feed_id"]}">${item[0]["feed_title"]}</a> (${item[1].days} days)</li>
+        %endfor
+        </ul>
+    %else:
+        <p>No inactive feeds.<p>
+    %endif
diff --git a/source/static/templates/index.html b/source/static/templates/index.html
new file mode 100644
index 00000000..43269f0a
--- /dev/null
+++ b/source/static/templates/index.html
@@ -0,0 +1,107 @@
+## index.html
+<%inherit file="base.html"/> 
+<%
+import utils
+%>
+<div class="right inner">
+    <form method=get action="/search/">
+        <input type="search" name="query" value="" placeholder="Search articles" maxlength=2048 autocomplete="on" />
+    </form>
+    <hr />
+    <div class="nav_container">Your feeds (${nb_feeds}):<br />
+        <%
+            html = ""
+        %>
+        %for feed in feeds:
+            <%
+                if mongo.nb_unread_articles(feed["feed_id"]) != 0:
+                    not_read_begin, not_read_end = "<b>", "</b>"
+                else:
+                    not_read_begin, not_read_end = "", ""
+                html += """<div><a href="/#%s">%s</a> (<a href="/unread/%s" title="Unread article(s)">%s%s%s</a> / %s)</div>\n""" % \
+                            (feed["feed_id"], feed["feed_title"], feed["feed_id"], not_read_begin, \
+                            format(mongo.nb_unread_articles(feed["feed_id"]), ',d'), not_read_end, format(mongo.nb_articles(feed["feed_id"]), ',d'))
+            %>
+        %endfor
+        ${html}
+    </div>
+</div>
+
+<div class="left inner">
+    <div class="menu_container">
+    %if feeds:
+        <a href="/management/"><img src="/img/management.png" title="Management" /></a>
+        <a href="/history/"><img src="/img/history.png" title="History" /></a>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <a href="/favorites/"><img src="/img/heart-32x32.png" title="Your favorites (${nb_favorites})" /></a>
+        <a href="/notifications/"><img src="/img/email-follow.png" title="Active e-mail notifications (${nb_mail_notifications})" /></a>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        %if nb_unread_articles != 0:
+            <a href="/mark_as_read/"><img src="/img/mark-as-read.png" title="Mark articles as read" /></a>
+            <a href="/unread/"><img src="/img/unread.png" title="Unread article(s): ${nb_unread_articles}" /></a>
+        %endif
+    %endif
+    <a href="/fetch/"><img src="/img/check-news.png" title="Check for news" /></a>
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <a href="/logout/"><img src="/img/logout.png" title="Logout" /></a>
+    </div><br/>
+    <%
+        html = ""
+    %>
+    <%
+        for feed in feeds:
+            html += """\n<h2 id="%s"><a href="%s" rel="noreferrer" target="_blank">%s</a>
+                        <a href="%s" rel="noreferrer" target="_blank">
+                            <img src="%s" width="28" height="28" />
+                        </a>
+                       </h2>\n<br />""" % \
+                        (feed["feed_id"], feed["site_link"], feed["feed_title"], \
+                        feed["feed_link"], feed["feed_image"])
+
+            # The main page display only 10 articles by feeds.
+            for article in mongo.get_articles(feed["feed_id"], limit=10):
+                if article["article_readed"] == False:
+                    # not readed articles are in bold
+                    not_read_begin, not_read_end = "<b>", "</b>"
+                else:
+                    not_read_begin, not_read_end = "", ""
+
+                # display a heart for faved articles
+                if article["article_like"] == True:
+                    like = """ <img src="/img/heart.png" title="I like this article!" />"""
+                else:
+                    like = ""
+
+                # Descrition for the CSS ToolTips
+                article_content = utils.clear_string(article["article_content"])
+                if article_content:
+                    description = " ".join(article_content.split(' ')[:55])
+                else:
+                    description = "No description."
+                # Title of the article
+                article_title = article["article_title"]
+                if len(article_title) >= 80:
+                    article_title = article_title[:80] + " ..."
+
+                # a description line per article (date, title of the article and
+                # CSS description tooltips on mouse over)
+                html += article["article_date"].strftime('%Y-%m-%d %H:%M') + " - " + \
+                        """<a class="tooltip" href="/article/%s:%s" rel="noreferrer" target="_blank">%s%s%s<span class="classic">%s</span></a>""" % \
+                                (feed["feed_id"], article["article_id"], not_read_begin, \
+                                article_title, not_read_end, description) + like + "<br />\n"
+            html += "<br />\n"
+
+            # some options for the current feed
+            html += """<a href="/articles/%s">All articles</a>&nbsp;&nbsp;&nbsp;""" % (feed["feed_id"],)
+            html += """<a href="/feed/%s">Feed summary</a>&nbsp;&nbsp;&nbsp;""" % (feed["feed_id"],)
+            html += """<div class="right"><h2><a href="/fetch/%s"><img src="/img/check-news.png" title="Check this feed for news" /></a></h2></div>\n""" % (feed["feed_id"],)
+            if mongo.nb_unread_articles(feed["feed_id"]) != 0:
+                html += """&nbsp;&nbsp;<a href="/mark_as_read/Feed_FromMainPage:%s">Mark all as read</a>""" % (feed["feed_id"],)
+                html += """&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/unread/%s" title="Unread article(s)">Unread article(s) (%s)</a>""" % (feed["feed_id"], mongo.nb_unread_articles(feed["feed_id"]))
+            if feed["mail"] == False:
+                html += """<br />\n<a href="/mail_notification/1:%s" title="By e-mail">Stay tuned</a>""" % (feed["feed_id"],)
+            else:
+                html += """<br />\n<a href="/mail_notification/0:%s" title="By e-mail">Stop staying tuned</a>""" %  (feed["feed_id"],)
+            html += """<h4><a href="/#top">Top</a></h4>\n"""
+    %>
+    ${html}
diff --git a/source/static/templates/languages.html b/source/static/templates/languages.html
new file mode 100644
index 00000000..d186677d
--- /dev/null
+++ b/source/static/templates/languages.html
@@ -0,0 +1,25 @@
+## languages.html
+<%inherit file="base.html"/>
+<div class="left inner">
+    <h1>Summary</h1>
+    <ul>
+    %for language in articles_sorted_by_languages.keys():
+        <li><a href="#${language}">${language}</a>: ${sum(map(len, articles_sorted_by_languages[language].values()))} articles</li>
+    %endfor
+    </ul>
+    %for language in articles_sorted_by_languages.keys():
+        <br />
+        <h1 id="${language}">${language}</h1>
+        %for feed_id in articles_sorted_by_languages[language]:
+            <%
+                feed = mongo.get_feed(feed_id)
+            %>
+            <h2>${feed["feed_title"]}</h2>
+            %for article in articles_sorted_by_languages[language][feed_id][:10]:
+                ${article["article_date"].strftime('%Y-%m-%d %H:%M')} - <a href="/article/${feed['feed_id']}:${article['article_id']}" rel="noreferrer" target="_blank">${article["article_title"]}</a>
+                <br />
+            %endfor
+            <br />
+        %endfor
+        <br />
+    %endfor
\ No newline at end of file
diff --git a/source/static/templates/management.html b/source/static/templates/management.html
new file mode 100644
index 00000000..a2bce1dc
--- /dev/null
+++ b/source/static/templates/management.html
@@ -0,0 +1,80 @@
+## management.html
+<%inherit file="base.html"/>
+<div class="left inner">
+    <h1>Subscriptions</h1>
+    <form method=get action="/add_feed/">
+        <p>
+        Add a feed:
+        <input type="url" name="url" placeholder="URL of a site" maxlength=2048 autocomplete="off">
+        <input type="submit" value="OK">
+        </p>
+    </form>
+
+    %if feeds:
+        <form method=get action="/remove_feed/">
+            Delete the feed:
+            <select name="feed_id">
+                %for feed in feeds:
+                    <option value="${feed['feed_id']}">${feed['feed_title']}</option>
+                %endfor
+            </select>
+            <input type="submit" value="OK">
+        </form>
+    %endif
+
+    %if not mail_notification_enabled:
+        <p>E-mail notification is disabled in the configuration file.</p>
+    %endif
+
+    %if feeds:
+        <hr />
+        <h1>Facts</h1>
+        <ul>
+        <li>active e-mail notifications: <a href="/notifications/">${nb_mail_notifications}</a>;</li>
+            <li>you like <a href="/favorites/">${nb_favorites}</a> article(s);</li>
+            <li><a href="/statistics/">tag clouds</a>;</li>
+            <li><a href="/inactives/">inactive feeds</a>;</li>
+            <li><a href="/languages/">languages</a>.</li>
+        </ul>
+    %endif
+
+    <hr />
+
+    <h1>Account</h1>
+    <p>
+    <form method=get action="/change_username/">
+            <input type="text" name="new_username" value="" placeholder="Enter a new username." />
+    </form>
+    <br />
+    <form method=get action="/change_password/">
+            <input type="password" name="new_password" value="" placeholder="Enter a new password." />
+    </form>
+    </p>
+
+    <hr />
+
+
+    <h1>Database</h1>
+    <p>${nb_articles} article(s) are stored in the database with <a href="/unread/">${nb_unread_articles} unread article(s)</a>.
+
+    <form method=get action="/fetch/">
+        <input type="submit" value="Fetch all feeds">
+    </form>
+    <form method=get action="/drop_base">
+        <input type="submit" value="Delete all articles">
+    </form>
+
+    <hr />
+
+    <h1>Export articles</h1>
+    <p>
+    <form method=get action="/export/">
+        <select name="export_method">
+            <option value="export_html" selected='selected'>HTML (simple Webzine)</option>
+            <option value="export_epub">ePub</option>
+            <option value="export_pdf">PDF</option>
+            <option value="export_txt">Text</option>
+        </select>
+        <input type="submit" value="Export">
+    </form>
+    </p>
diff --git a/source/static/templates/notifications.html b/source/static/templates/notifications.html
new file mode 100644
index 00000000..88558b05
--- /dev/null
+++ b/source/static/templates/notifications.html
@@ -0,0 +1,18 @@
+## article.html
+<%inherit file="base.html"/>
+<div class="left inner">
+    %if feeds != []:
+        <h1>You are receiving e-mails for the following feeds:</h1>
+        <ul>
+        %for feed in feeds:
+            <li><a href="/feed/${feed['feed_id']}">${feed['feed_title']}</a> - <a href="/mail_notification/0:${feed['feed_id']}">Stop</a></li>
+        %endfor
+        </ul>
+    %else:
+        <p>No active notifications.<p>
+    %endif
+    <p>Notifications are sent to: <a href="mail:${mail_to}">${mail_to}</a>.
+    %if not mail_notification_enabled:
+        However e-mail notification is disabled in the configuration file.
+    %endif
+    </p>
diff --git a/source/static/templates/plain_text.html b/source/static/templates/plain_text.html
new file mode 100644
index 00000000..44b7da91
--- /dev/null
+++ b/source/static/templates/plain_text.html
@@ -0,0 +1,5 @@
+## plain_text.html
+<%inherit file="base.html"/>
+<div class="left inner">
+    <h1><i>${article_title}</i> from <a href="/articles/%s">${feed_title}</a></h1><br />
+    ${description}
\ No newline at end of file
diff --git a/source/static/templates/search.html b/source/static/templates/search.html
new file mode 100644
index 00000000..da766ee9
--- /dev/null
+++ b/source/static/templates/search.html
@@ -0,0 +1,53 @@
+## search.html
+<%inherit file="base.html"/>
+<%
+import utils
+%>
+<div class="left inner">
+%if len(search_result) != 0:
+    <h1>Articles containing the string <i>${query}</i> (${sum([articles.count() for articles in search_result.values()])} results)</h1>
+%else:
+    <h1>String <i>${query}</i> not found.</h1>
+%endif
+<%
+    html = ""
+    feed_id = None
+%>
+
+%for feed_id in search_result.keys():
+    <%
+        new_feed_section = True
+        feed = mongo.get_feed(feed_id)
+        print(search_result[feed["feed_id"]].count())
+        for article in search_result[feed["feed_id"]]:
+            if new_feed_section is True:
+                new_feed_section = False
+                html += """<h2><a href="/articles/%s" rel="noreferrer" target="_blank">%s</a><a href="%s" rel="noreferrer" target="_blank"><img src="%s" width="28" height="28" /></a></h2>\n""" % \
+                    (feed["feed_id"], feed["feed_title"], feed["feed_link"], feed["feed_image"])
+
+            if article["article_readed"] == False:
+                # not readed articles are in bold
+                not_read_begin, not_read_end = "<b>", "</b>"
+            else:
+                not_read_begin, not_read_end = "", ""
+
+            # display a heart for faved articles
+            if article["article_like"] == True:
+                like = """ <img src="/img/heart.png" title="I like this article!" />"""
+            else:
+                like = ""
+
+            # descrition for the CSS ToolTips
+            article_content = utils.clear_string(article["article_content"])
+            description = " ".join(article_content[:500].split(' ')[:-1])
+
+            # a description line per article (date, title of the article and
+            # CSS description tooltips on mouse over)
+            html += article["article_date"].strftime('%Y-%m-%d %H:%M') + " - " + \
+                    """<a class="tooltip" href="/article/%s:%s" rel="noreferrer" target="_blank">%s%s%s<span class="classic">%s</span></a>""" % \
+                            (feed["feed_id"], article["article_id"], not_read_begin, \
+                            article["article_title"][:150], not_read_end, description) + like + "<br />\n"
+    %>
+%endfor
+
+${html}
\ No newline at end of file
diff --git a/source/static/templates/statistics.html b/source/static/templates/statistics.html
new file mode 100644
index 00000000..5dfcbfa8
--- /dev/null
+++ b/source/static/templates/statistics.html
@@ -0,0 +1,14 @@
+## statistics.html
+<%inherit file="base.html"/>
+<div class="left inner">
+    %if articles:
+        <h1>Statistics</h1>
+        <h3>Tag cloud</h3>
+        <form method=get action="/statistics/">
+            Minimum size of a word:
+            <input type="number" name="word_size" value="${word_size}" min="2" max="15" step="1" size="2" />
+        </form>
+        <div style="width: 35%; overflow:hidden; text-align: justify">
+            ${tag_cloud}
+        </div>
+    %endif
\ No newline at end of file
diff --git a/source/static/templates/unread.html b/source/static/templates/unread.html
new file mode 100644
index 00000000..d37d3034
--- /dev/null
+++ b/source/static/templates/unread.html
@@ -0,0 +1,76 @@
+## unread.html
+<%inherit file="base.html"/>
+<%
+import utils
+%>
+<div class="left inner">
+    <%
+        html = ""
+        if mongo.nb_unread_articles() != 0:
+
+            # List unread articles of all the database
+            if feed_id == "":
+                html += "<h1>Unread article(s)</h1>"
+                html += """\n<br />\n<a href="/mark_as_read/">Mark articles as read</a>\n<hr />\n"""
+                for feed in feeds:
+                    new_feed_section = True
+                    nb_unread = 0
+
+                    # For all unread article of the current feed.
+                    for article in mongo.get_articles(feed["feed_id"], condition=("article_readed", False)):
+                        nb_unread += 1
+                        if new_feed_section is True:
+                            new_feed_section = False
+                            html += """<h2><a name="%s"><a href="%s" rel="noreferrer" target="_blank">%s</a></a><a href="%s" rel="noreferrer" target="_blank"><img src="%s" width="28" height="28" /></a></h2>\n""" % \
+                                (feed["feed_id"], feed["site_link"], feed["feed_title"], feed["feed_link"], feed["feed_image"])
+
+                        # descrition for the CSS ToolTips
+                        article_content = utils.clear_string(article["article_content"])
+                        if article_content:
+                            description = " ".join(article_content[:500].split(' ')[:-1])
+                        else:
+                            description = "No description."
+
+                        # a description line per article (date, title of the article and
+                        # CSS description tooltips on mouse over)
+                        html += article["article_date"].strftime('%Y-%m-%d %H:%M') + " - " + \
+                                """<a class="tooltip" href="/article/%s:%s" rel="noreferrer" target="_blank">%s<span class="classic">%s</span></a><br />\n""" % \
+                                        (feed["feed_id"], article["article_id"], article["article_title"][:150], description)
+
+                        if nb_unread == mongo.nb_unread_articles(feed["feed_id"]):
+                            html += """<br />\n<a href="/mark_as_read/Feed:%s">Mark all articles from this feed as read</a>\n""" % \
+                                        (feed["feed_id"],)
+                html += """<hr />\n<a href="/mark_as_read/">Mark articles as read</a>\n"""
+
+
+            # List unread articles of a feed
+            else:
+                try:
+                    feed = mongo.get_feed(feed_id)
+                except:
+                    return "<p>This feed do not exists.</p>"
+                html += """<h1>Unread article(s) of the feed <a href="/articles/%s">%s</a></h1>
+                    <br />""" % (feed_id, feed["feed_title"])
+
+                # For all unread article of the feed.
+                for article in mongo.get_articles(feed_id, condition=("article_readed", False)):
+                    # descrition for the CSS ToolTips
+                    article_content = utils.clear_string(article["article_content"])
+                    if article_content:
+                        description = " ".join(article_content[:500].split(' ')[:-1])
+                    else:
+                        description = "No description."
+
+                    # a description line per article (date, title of the article and
+                    # CSS description tooltips on mouse over)
+                    html += article["article_date"].strftime('%Y-%m-%d %H:%M') + " - " + \
+                            """<a class="tooltip" href="/article/%s:%s" rel="noreferrer" target="_blank">%s<span class="classic">%s</span></a><br />\n""" % \
+                                    (feed_id, article["article_id"], article["article_title"][:150], description)
+
+                html += """<hr />\n<a href="/mark_as_read/Feed:%s">Mark all as read</a>""" % (feed_id,)
+        # No unread article
+        else:
+            html += '<h1>No unread article(s)</h1>\n<br />\n<a href="/fetch/">Why not check for news?</a>'
+        html += """\n<h4><a href="/">All feeds</a></h4>"""
+    %>
+    ${html}
\ No newline at end of file
-- 
cgit