Initial commit (version 0.0.40 beta)

COPYING

@@ -0,0 +1,21 @@
+Shaarli is distributed under the zlib/libpng License:
+
+Copyright (c) 2011 Sébastien SAUVAGE (sebsauvage.net)
+
+This software is provided 'as-is', without any express or implied warranty.
+In no event will the authors be held liable for any damages arising from
+the use of this software.
+
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it 
+freely, subject to the following restrictions:
+
+  1. The origin of this software must not be misrepresented; you must not 
+     claim that you wrote the original software. If you use this software
+     in a product, an acknowledgment in the product documentation would
+     be appreciated but is not required.
+
+  2. Altered source versions must be plainly marked as such, and must
+     not be misrepresented as being the original software.
+
+  3. This notice may not be removed or altered from any source distribution.

inc/jquery-MIT-LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2011 John Resig, http://jquery.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

inc/jquery.lazyload.min.js

@@ -0,0 +1,15 @@
+/*
+ * Lazy Load - jQuery plugin for lazy loading images
+ *
+ * Copyright (c) 2007-2012 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ * Project home:
+ *   http://www.appelsiini.net/projects/lazyload
+ *
+ * Version:  1.7.0
+ *
+ */
+(function(a,b){$window=a(b),a.fn.lazyload=function(c){var d={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};c&&(undefined!==c.failurelimit&&(c.failure_limit=c.failurelimit,delete c.failurelimit),undefined!==c.effectspeed&&(c.effect_speed=c.effectspeed,delete c.effectspeed),a.extend(d,c));var e=this;return 0==d.event.indexOf("scroll")&&a(d.container).bind(d.event,function(b){var c=0;e.each(function(){$this=a(this);if(d.skip_invisible&&!$this.is(":visible"))return;if(!a.abovethetop(this,d)&&!a.leftofbegin(this,d))if(!a.belowthefold(this,d)&&!a.rightoffold(this,d))$this.trigger("appear");else if(++c>d.failure_limit)return!1})}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(d.appear){var f=e.length;d.appear.call(b,f,d)}a("<img />").bind("load",function(){c.hide().attr("src",c.data(d.data_attribute))[d.effect](d.effect_speed),b.loaded=!0;var f=a.grep(e,function(a){return!a.loaded});e=a(f);if(d.load){var g=e.length;d.load.call(b,g,d)}}).attr("src",c.data(d.data_attribute))}}),0!=d.event.indexOf("scroll")&&c.bind(d.event,function(a){b.loaded||c.trigger("appear")})}),$window.bind("resize",function(b){a(d.container).trigger(d.event)}),a(d.container).trigger(d.event),this},a.belowthefold=function(c,d){if(d.container===undefined||d.container===b)var e=$window.height()+$window.scrollTop();else var e=a(d.container).offset().top+a(d.container).height();return e<=a(c).offset().top-d.threshold},a.rightoffold=function(c,d){if(d.container===undefined||d.container===b)var e=$window.width()+$window.scrollLeft();else var e=a(d.container).offset().left+a(d.container).width();return e<=a(c).offset().left-d.threshold},a.abovethetop=function(c,d){if(d.container===undefined||d.container===b)var e=$window.scrollTop();else var e=a(d.container).offset().top;return e>=a(c).offset().top+d.threshold+a(c).height()},a.leftofbegin=function(c,d){if(d.container===undefined||d.container===b)var e=$window.scrollLeft();else var e=a(d.container).offset().left;return e>=a(c).offset().left+d.threshold+a(c).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(c){return a.belowthefold(c,{threshold:0,container:b})},"above-the-top":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-screen":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-screen":function(c){return!a.rightoffold(c,{threshold:0,container:b})},"in-viewport":function(c){return!a.inviewport(c,{threshold:0,container:b})},"above-the-fold":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-fold":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-fold":function(c){return!a.rightoffold(c,{threshold:0,container:b})}})})(jQuery,window)

inc/shaarli.css

@@ -0,0 +1,449 @@
+/* CSS Stylsheet for Shaarli - http://sebsauvage.net/wiki/doku.php?id=php:shaarli */
+
+/* CSS Reset from Yahoo to cope with browsers CSS inconsistencies. */
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html
+version: 2.8.2r1
+*/
+html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
+
+body { font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; font-size:10pt; background-color: #ffffff; }
+input, textarea {
+	background-color: #dedede;
+	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
+	background: -webkit-linear-gradient(#dedede, #ffffff);
+	background: -moz-linear-gradient(#dedede, #ffffff);
+	background: -ms-linear-gradient(#dedede, #ffffff);
+	background: -o-linear-gradient(#dedede, #ffffff);
+	background: linear-gradient(#dedede, #ffffff);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+	padding:5px;
+	border-radius: 5px 5px 5px 5px;
+	border: none;
+	color:#000;
+
+	}
+
+h1 { font-size:20pt; font-weight:bold; font-style:italic; margin-bottom:20px; }
+/* I don't give a shit about IE. He can't understand selectors such as input[type='submit']. */
+
+/* Buttons */
+.bigbutton {
+    background-color: #c0c0c0;
+	background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent;
+	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff));
+	background: -webkit-linear-gradient(#c0c0c0, #ffffff);
+	background: -ms-linear-gradient(#c0c0c0, #ffffff);
+	background: -o-linear-gradient(#c0c0c0, #ffffff);
+	background: linear-gradient(#c0c0c0, #ffffff);
+    border-radius: 3px 3px 3px 3px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    height: 24px;
+    margin-left: 5px;
+    padding: 0 5px;
+	color: #606060;
+	border-style:outset;
+	border-width:1px;
+
+	}
+.smallbutton {
+    background-color: #c0c0c0;
+	background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent;
+	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff));
+	background: -webkit-linear-gradient(#c0c0c0, #ffffff);
+	background: -ms-linear-gradient(#c0c0c0, #ffffff);
+	background: -o-linear-gradient(#c0c0c0, #ffffff);
+	background: linear-gradient(#c0c0c0, #ffffff);
+    border-radius: 3px 3px 3px 3px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    height: 20px;
+    margin-left: 5px;
+    padding: 0 5px;
+	color: #606060;
+	border-style:outset;
+	border-width:1px;
+
+	}
+
+/* Edit/Delete buttons on links */
+.button_edit, .button_delete { border-radius:0; box-shadow:none; border-style:none; border-width:0; padding:0; background:none; }
+.button_edit { margin-left:10px; }
+
+
+#pageheader #logo{
+background-image: url('../images/logo.png');
+background-repeat: no-repeat;
+float:left;
+margin:0 10px 0 10px;
+width:105px;
+height:55px;
+cursor:pointer;
+
+}
+
+#pageheader
+{
+    background-color: #333333;
+	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111));
+	background: -webkit-linear-gradient(#333333, #111111);
+	background: -moz-linear-gradient(#333333, #111111);
+	background: -ms-linear-gradient(#333333, #111111);
+	background: -o-linear-gradient(#333333, #111111);
+	background: linear-gradient(#333333, #111111);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+	width:auto;
+	padding:0 10px 5px 10px;
+	margin: auto; 
+}
+
+#pageheader a
+{
+    background-color: #333333;
+	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#000000));
+	background: -webkit-linear-gradient(#333333, #000000);
+	background: -moz-linear-gradient(#333333, #000000);
+	background: -ms-linear-gradient(#333333, #000000);
+	background: -o-linear-gradient(#333333, #000000);
+	background: linear-gradient(#333333, #000000);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+	padding:5px;
+	border-radius: 5px 5px 5px 5px;
+	margin:10px 3px 3px 3px;
+	color:#A2DD42;
+	float:left;
+	text-decoration:none;
+}
+
+#toolsdiv a{
+	clear:both;
+}
+#toolsdiv a span{
+	color:#ffffff;
+}
+.linksperpage,.tagfilter,.searchform,.addform {
+	background-color: #dedede;
+	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
+	background: -webkit-linear-gradient(#dedede, #ffffff);
+	background: -moz-linear-gradient(#dedede, #ffffff);
+	background: -ms-linear-gradient(#dedede, #ffffff);
+	background: -o-linear-gradient(#dedede, #ffffff);
+	background: linear-gradient(#dedede, #ffffff);
+	display:inline;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+	padding:5px;
+	border: none;
+	border-radius: 5px 5px 5px 5px;
+	margin:10px 3px 3px 3px;
+	color:#cecece;
+}
+
+.linksperpage{
+	box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
+	padding:3px;
+}
+
+.linksperpage input,.tagfilter input, .searchform input, .addform input{
+	border:none;
+	color:#606060;
+	background:none;
+	box-shadow:none;
+	padding:5px;
+}
+
+.linksperpage input{
+	padding:0;
+}
+
+.tagfilter input.bigbutton,.searchform input.bigbutton,.addform input.bigbutton{
+    background-color: #dedede;
+   	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
+	background: -webkit-linear-gradient(#dedede, #ffffff);
+	background: -moz-linear-gradient(#dedede, #ffffff);
+	background: -ms-linear-gradient(#dedede, #ffffff);
+	background: -o-linear-gradient(#dedede, #ffffff);
+	background: linear-gradient(#dedede, #ffffff);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+	padding:0 5px 0 5px;
+	margin:5px 0 5px 0;
+	height:20px;
+	border-radius: 5px 5px 5px 5px;
+	cursor:pointer;
+}
+
+#shaarli_title { font-weight:bold; font-style:italic; margin-top:0;}
+#shaarli_title a { color: #fff !important; }
+
+#pageheader a:visited { color:#98C943; text-decoration:none;}
+#pageheader a:hover { color:#FFFFC9; text-decoration:none;}
+#pageheader a:active { color:#bbb; text-decoration:none;}
+#searchcriteria { padding: 4px 0px 5px 5px; font-weight:bold;}
+.paging { padding:5px;background-color:#777; color:#ccc; text-align:center;  clear:both;}
+.paging a:link { color:#ccc; text-decoration:none;}
+.paging a:visited { color:#ccc;  }
+.paging a:hover {  color:#FFFFC9;  }
+.paging a:active { color:#fff;  }
+#paging_privatelinks { float:left; }
+#paging_linksperpage { float:right; padding-right:5px; }
+#paging_current { display:inline; color:#fff; padding:0 20 0 20; }
+#paging_older { margin-right:15px; }
+#paging_newer { margin-left:15px; }
+
+#headerform { color:#ffffff; padding:5px 5px 5px 5px; clear: both;}
+#toolsdiv { color:#ffffff; padding:5px 5px 5px 5px; clear:left; }
+#uploaddiv { color:#ffffff; padding:5px 5px 5px 5px; clear:left; }
+#editlinkform { height:100%;color:#ffffff; padding:5px 5px 5px 15px; width:80%; clear:left; }
+#linklist li {
+	padding:4px 10px 15px 20px; border-top: 1px solid #bbb; clear:both;
+    background-color: #F2F2F2;
+	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff));
+	background: -webkit-linear-gradient(#F2F2F2, #ffffff);
+	background: -moz-linear-gradient(#F2F2F2, #ffffff);
+	background: -ms-linear-gradient(#F2F2F2, #ffffff);
+	background: -o-linear-gradient(#F2F2F2, #ffffff);
+	background: linear-gradient(#F2F2F2, #ffffff);
+}
+
+/*
+#linklist li.publicLinkHightLight:hover,#linklist li:hover{
+	background: #E9FFCE;
+}
+*/
+#linklist li.private { background: url('../images/private.png') no-repeat 10px center; padding-left:60px; }
+.private  .linktitle a {color:#969696;}
+.linktitle { font-size:14pt; font-weight:bold; }
+.linktitle a { text-decoration: none; color:#80AD48; }
+.linktitle a:hover { color:#F57900; }
+.linkdate { font-size:8pt; color:#888; }
+.linkdate a { background-image:url('../images/calendar.png');padding:2px 0 3px 20px;background-repeat:no-repeat;text-decoration: none; color:#E28E3F;  }
+.linkdate a:hover { color: #F57900 }
+.linkurl { font-size:8pt; color:#4BAA74; }
+.linkdescription { color:#000; margin-top:0; margin-bottom:12px; font-weight:normal; max-height:400px; overflow:auto; }
+.linkdescription a { text-decoration: none; color:#3465A4; }
+.linkdescription a:hover { color:#F57900; }
+.linktaglist { padding-top:10px;}
+.linktag {
+
+font-size:9pt;
+    background-color: #F2F2F2;
+	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff));
+	background: -webkit-linear-gradient(#F2F2F2, #ffffff);
+	background: -moz-linear-gradient(#F2F2F2, #ffffff);
+	background: -ms-linear-gradient(#F2F2F2, #ffffff);
+	background: -o-linear-gradient(#F2F2F2, #ffffff);
+	background: linear-gradient(#F2F2F2, #ffffff);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+	padding:3px 3px 3px 20px;
+	height:20px;
+	border-radius: 3px 3px 3px 3px;
+	cursor:pointer;
+	background-image:url('../images/tag_blue.png');
+	background-repeat:no-repeat;
+	background-position:3px center;
+	background-color:#ffffff;
+}
+.linktag:hover { border-color: #555573; color:#000; }
+.linktag a { color:#777; text-decoration:none; }
+.linkshort { font-size:8pt; color:#888; }
+.linkshort a { text-decoration: none; color:#393964; }
+.linkshort a:hover { text-decoration: underline; }
+.buttoneditform { display:inline; }
+#footer { font-size:8pt; text-align:center; border-top:1px solid #ddd; color: #888; clear:both; }
+#footer  a{ color:#486D08;}
+#footer  a:hover{ color:#000000;}
+#newversion { background-color: #FFFFA0; color:#000; position:absolute; top:0;right:0; padding:2 7 2 7;  font-size:9pt;}
+#cloudtag  { padding-left:10%; padding-right:10%; }
+#cloudtag a { color:black; text-decoration:none; }
+#installform td  { font-size: 10pt; color:black; padding:10px 5px 10px 5px; clear:left; }
+#changepasswordform { color:#ccc; padding:10px 5px 10px 5px; clear:left; }
+#changetag { color:#ccc; padding:10px 5px 10px 5px; clear:left; }
+#configform td  { color:#ccc; font-size: 10pt; padding:10px 5px 10px 5px;  }
+#configform  { color:#ccc; padding:10px 5px 10px 5px; clear:left; }
+.thumbnail { float:right;  margin-left: 10px; }
+/* If you want thumbnails on the left:
+.thumbnail { float:left;  margin-right: 10px;   }
+.linkcontainer { position: static; margin-left:130px; }
+*/
+
+
+
+
+/* --- Picture wall CSS --- */
+#picwall_container { color:#fff; background-color:#000; clear:both; }
+.picwall_pictureframe { background-color:#000; z-index:5; position:relative; display:table-cell; vertical-align:middle;width:90px; height:90px; overflow:hidden; text-align:center;  float:left; }
+.picwall_pictureframe img { max-width: 100%;height: auto; } /* Adapt the width of the image */
+.picwall_pictureframe a {text-decoration:none;}
+
+/* CSS to show title when hovering an image - no javascript required. */
+.picwall_pictureframe span.info {display: none;}
+.picwall_pictureframe:hover span.info {
+    display:block;
+    position:absolute;
+    top:0; left:0; width:90px;
+    font-weight:bold;
+    font-size:8pt;
+    color:#fff;
+    text-align: left;
+  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.4);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); /* IE6–IE9 */
+text-shadow:2px 2px 1px #000000;    
+}
+
+/* Minimal customisation for jQuery widgets */
+.ui-autocomplete { background-color:#fff; padding-left:5px;}
+.ui-state-hover { background-color: #604dff; color:#fff; }
+
+#linklist li.publicLinkHightLight{
+	background: #ffffff;
+}
+
+div.qrcode {
+width:220px;
+height:220px;
+background-color: #ffffff;
+border: 1px solid black;
+position: absolute;
+top:-100px;
+left:-100px;
+text-align:center;
+font-size: 8pt;
+z-index:50;
+-webkit-box-shadow:2px 2px 20px 2px #333333;
+-moz-box-shadow:2px 2px 20px 2px #333333;
+-o-box-shadow:2px 2px 20px 2px #333333;
+-ms-box-shadow:2px 2px 20px 2px #333333;
+box-shadow:2px 2px 20px 2px #333333;
+}
+
+div.daily
+{
+    font-family: Georgia, 'DejaVu Serif', Norasi, serif; 
+    background-color: #E6D6BE;
+    /* Background paper texture by BashCorpo:
+       http://www.bashcorpo.dk/textures.php
+       http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-5-22966998  */
+    background-image: url("../images/Paper_texture_v5_by_bashcorpo_w1000.jpg");
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    position:relative;
+    border-bottom: 2px solid black;
+}
+
+#daily_col1 { float:left;position:relative; width:33%; padding-left:1%; }
+#daily_col2 { float:left;position:relative; width:33%; }
+#daily_col3 { float:left;position:relative; width:33%;}
+
+div.dailyAbout
+{ 
+    float:left;
+    border: 1px solid black;
+    font-size: 8pt;
+    position:absolute;
+    left:10px;
+    top: 15px;
+    padding: 5px 5px 5px 5px;
+    text-align:center; 
+}
+div.dailyAbout  a { color: #890500; }
+div.dailyTitle
+ { 
+     font-weight: bold;
+     font-size: 44pt;
+     text-align:center; 
+     padding:10px 20px 0px 20px;
+}
+div.dailyDate
+ { 
+     font-size: 12pt;
+     font-weight:bold; 
+     text-align:center; 
+     padding:0px 20px 30px 20px;
+}
+
+/* Individual entries in "Daily": */
+div.dailyEntry
+{
+    margin: 5px 10px 2px 5px;
+    font-size: 11pt;
+    border-top: 1px solid #555;
+}
+div.dailyEntry  a { text-decoration:none; color: #890500; }
+div.dailyEntryTags { font-size:7.75pt;  }
+div.dailyEntryTitle { font-size:18pt; font-weight:bold;}
+div.dailyEntryThumbnail 
+{ 
+    width:100%; 
+    text-align:center; 
+    background-color:rgb(128,128,128); 
+    background:url(../images/50pc_transparent.png);
+    padding:4px 0px 2px 0px;
+}
+div.dailyEntryDescription
+{ 
+    margin-top: 10px;
+    margin-bottom: 30px; 
+    text-align:justify; 
+    overflow:auto;
+}
+
+/* Common css screwdriver */
+.clear{
+	clear:both;
+}
+
+/* For lazy images loading in picture wall.
+   using http://www.appelsiini.net/projects/lazyload 
+ */
+.lazyimage { display:none; }
+
+@media print {
+html {border:none;background:#fff!important;color:#000!important;}
+body {font-size:12pt;width:auto!important;margin:auto!important;}
+p {orphans:3; /*pas de ligne seule en bas */widows:3;/*pas de ligne seule en haut*/}
+a {color:#000!important;text-decoration:none!important;}
+#pageheader, .paging, #linklist li form, #footer {display:none;}
+#linklist li { padding:2 0 10 0; border-top: 2px solid #000; clear:both; }
+#linklist li.private { background-color: none; border-left:0; }
+.linkdate { line-height:2; }
+.linkurl { color:#000; }
+.linkdescription { font-size:10pt;}
+.linktag { border: 1px solid black; font-style:italic;  font-size:8pt;}
+
+}
+
+
+@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 854px)
+{
+/* A few fixes for mobile devices (far from perfect). */
+.nomobile  { display:none; }
+#logo { display:none; }
+#pageheader a
+{
+	padding:5px;
+	border-radius: 5px 5px 5px 5px;
+	margin:3px;
+}
+.searchform,.tagfilter  { display:block !important; margin:0px !important; padding:0px !important; width:100% !important; }
+.searchform input,.tagfilter input  { margin:0px !important; padding:0px !important; display:inline !important; }
+.tagfilter input.bigbutton,.searchform input.bigbutton,.addform input.bigbutton{  width:30%; font-size:smaller;}
+#searchform_value { width:70% !important; }
+#tagfilter_value { width:70% !important; }
+div.qrcode { position:relative; float:left; top:-10px; left:0px; }
+#paging_privatelinks { float;none; }
+#paging_linksperpage { float:none; margin-bottom:10px; font-size:smaller;}
+#paging_older,#paging_newer,#paging_linksperpage a { border: 1px solid black; padding:3px 5px 3px 5px; background-color:#666; color:#fff; border-radius: 5px 5px 5px 5px;}
+.thumbnail { float:none; height:auto; margin: 0px; text-align:center;}
+#cloudtag  { padding:0px; }
+div.dailyAbout {  float:none; position:relative; width:100%; clear:both; padding:0px; top:0px; left:0px; }
+#daily_col1,#daily_col2,#daily_col3 { float:none; width:100%; padding:0px;}
+div.dailyTitle  { font-size: 18pt; margin-top:5px; padding:0px;}
+div.dailyDate  {  font-size: 11pt;padding:0px; display:block; }
+div.dailyEntryTitle { font-size:16pt; font-weight:bold;}
+div.dailyEntryDescription { font-size:10pt; }
+
+} 
+

tpl/addlink.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.addform.post.focus();">
+<div id="pageheader">
+	{include="page.header"}
+	<div id="headerform">
+		<form method="GET" action="" name="addform" class="addform">
+			<input type="text" name="post" style="width:50%;"> 
+			<input type="submit" value="Add link" class="bigbutton">
+		</form>
+	</div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/changepassword.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.changepasswordform.oldpassword.focus();">
+<div id="pageheader">
+	{include="page.header"}
+	<form method="POST" action="" name="changepasswordform" id="changepasswordform">
+	Old password: <input type="password" name="oldpassword">&nbsp; &nbsp;
+	New password: <input type="password" name="setpassword">
+	<input type="hidden" name="token" value="{$token}">
+	<input type="submit" name="Save" value="Save password" class="bigbutton"></form>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/changetag.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.changetag.fromtag.focus();">
+<div id="pageheader">
+	{include="page.header"}
+	<form method="POST" action="" name="changetag" id="changetag">
+	<input type="hidden" name="token" value="{$token}">
+	Tag: <input type="text" name="fromtag" id="fromtag">
+	<input type="text" name="totag" style="margin-left:40px;"><input type="submit" name="renametag" value="Rename tag" class="bigbutton">
+	&nbsp;&nbsp;or&nbsp; <input type="submit" name="deletetag" value="Delete tag" class="bigbutton" onClick="return confirmDeleteTag();"><br>(Case sensitive)</form>
+<script language="JavaScript">function confirmDeleteTag() { var agree=confirm("Are you sure you want to delete this tag from all links ?"); if (agree) return true ; else return false ; }</script>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/configure.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.configform.title.focus();">
+<div id="pageheader">
+	{include="page.header"}
+{$timezone_js}
+    <form method="POST" action="" name="configform" id="configform">
+	<input type="hidden" name="token" value="{$token}">
+	<table border="0" cellpadding="20">
+	  <tr><td><b>Page title:</b></td><td><input type="text" name="title" id="title" size="50" value="{$title}"></td></tr>
+	  <tr><td valign="top"><b>Timezone:</b></td><td>{$timezone_form}</td></tr>
+	  <tr><td valign="top"><b>Redirector</b></td><td><input type="text" name="redirector" id="redirector" size="50" value="{$redirector}"><br>(e.g. <i>http://anonym.to/?</i> will mask the HTTP_REFERER)</td></tr>
+      <tr> <td valign="top">Security:</td> <td><input type="checkbox" name="disablesessionprotection" id="disablesessionprotection" {if="!empty($GLOBALS['disablesessionprotection'])"}checked{/if}><label for="disablesessionprotection">&nbsp;Disable session cookie hijacking protection (Check this if you get disconnected often or if your IP address changes often.)</label></td></tr>
+	  <tr><td></td><td align="right"><input type="submit" name="Save" value="Save config" class="bigbutton"></td></tr>
+	</table>
+	</form>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/daily.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">{include="page.header"}</div>
+<div class="daily">
+    <div class="dailyAbout">
+      All links of one day<br>in a single page.<br>
+	  {if="$previousday"} <a href="?do=daily&day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
+	  - 
+	  {if="$nextday"}<a href="?do=daily&day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
+      <br><br>
+	  <a href="?do=dailyrss" title="1 RSS entry per day"><img src="images/feed-icon-14x14.png#" width="14" height="14" style="position:relative;top:3px; margin-right:4px;">Daily RSS Feed</a>
+    </div>
+    <div class="dailyTitle"><img src="../images/floral_left.png" width="51" height="50" class="nomobile"> The Daily Shaarli <img src="../images/floral_right.png" width="51" height="50" class="nomobile"></div>
+    <div class="dailyDate"><span class="nomobile">&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;</span> {$day} <span class="nomobile">&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;</span></div>
+    <div style="clear:both;"></div>
+    
+    {if="$linksToDisplay"}
+        <div id="daily_col1">
+        {loop="col1"}
+        <div class="dailyEntry">
+            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
+            {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
+            <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
+            {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
+            <div class="dailyEntryDescription">{$value.formatedDescription}</div>
+        </div>
+        {/loop}
+        </div>
+
+        <div id="daily_col2">
+        {loop="col2"}
+        <div class="dailyEntry">
+            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
+            {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
+            <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
+            {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
+            <div class="dailyEntryDescription">{$value.formatedDescription}</div>
+        </div>
+        {/loop}
+        </div>    
+
+        <div id="daily_col3">
+        {loop="col3"}
+        <div class="dailyEntry">
+            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
+            {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
+            <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
+            {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
+            <div class="dailyEntryDescription">{$value.formatedDescription}</div>
+        </div>
+        {/loop}
+        </div>        
+    {else}
+         <div style="text-align:center; padding:40px 0px 90px 0px;">No articles on this day.</div>
+    {/if}
+    <div style="clear:both;"></div>
+    <div style="text-align:center; padding-bottom:20px;"><img src="../images/squiggle_closing.png" width="66" height="61" alt="-"></div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/dailyrss.html

@@ -0,0 +1,8 @@
+{loop="links"}
+	<h3><a href="{$value.url}">{$value.title|htmlspecialchars}</a></h3>
+	<small>{if="!$GLOBALS['config']['HIDE_TIMESTAMPS']"}{$value.localdate|htmlspecialchars} - {/if}{if="$value.tags"}{$value.tags|htmlspecialchars}{/if}<br>
+	{$value.url|htmlspecialchars}</small><br>
+	{if="$value.thumbnail"}{$value.thumbnail}{/if}<br>
+	{if="$value.description"}{$value.formatedDescription}{/if}
+	<br><br><hr>
+{/loop}

tpl/editlink.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body 
+{if condition="$link.title==''"}onload="document.linkform.lf_title.focus();"
+{elseif condition="$link.description==''"}onload="document.linkform.lf_description.focus();"
+{else}onload="document.linkform.lf_tags.focus();"{/if} >
+<div id="pageheader">
+	{include="page.header"}
+	<div id="editlinkform">
+	    <form method="post" name="linkform">
+	        <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
+	        <i>URL</i><br><input type="text" name="lf_url" value="{$link.url|htmlspecialchars}" style="width:100%"><br>
+	        <i>Title</i><br><input type="text" name="lf_title" value="{$link.title|htmlspecialchars}" style="width:100%"><br>
+	        <i>Description</i><br><textarea name="lf_description" rows="4" cols="25" style="width:100%">{$link.description|htmlspecialchars}</textarea><br>
+	        <i>Tags</i><br><input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}" style="width:100%"><br>
+	        <input type="checkbox" {if condition="$link.private!=0"}checked="yes"{/if} style="margin:7 0 10 0;" name="lf_private" id="lf_private">&nbsp;<label for="lf_private"><i>Private</i></label><br>
+	        <input type="submit" value="Save" name="save_edit" class="bigbutton" style="margin-left:40px;">
+	        <input type="submit" value="Cancel" name="cancel_edit" class="bigbutton" style="margin-left:40px;">
+	        {if condition="!$link_is_new"}<input type="submit" value="Delete" name="delete_link" class="bigbutton" style="margin-left:180px;" onClick="return confirmDeleteLink();">{/if}
+	        <input type="hidden" name="token" value="{$token}">
+	        {if condition="$http_referer"}<input type="hidden" name="returnurl" value="{$http_referer|htmlspecialchars}">{/if}
+	    </form>
+	</div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/export.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">
+	{include="page.header"}
+	<div id="toolsdiv">
+	    <a href="?do=export&what=all"><b>Export all</b> <span>: Export all links</span></a><br><br>
+	    <a href="?do=export&what=public"><b>Export public</b> <span>: Export public links only</a><br><br>
+	    <a href="?do=export&what=private"><b>Export private</b> <span>: Export private links only</a><br><br style="clear:both;">
+	</div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/import.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.uploadform.filetoupload.focus();">
+<div id="pageheader">
+	{include="page.header"}
+	<div id="uploaddiv">
+	Import Netscape html bookmarks (as exported from Firefox/Chrome/Opera/delicious/diigo...) (Max: {$maxfilesize|htmlspecialchars} bytes).
+	<form method="POST" action="?do=upload" enctype="multipart/form-data" name="uploadform" id="uploadform">
+	    <input type="hidden" name="token" value="{$token}">
+	    <input type="file" name="filetoupload" size="80">
+	    <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize|htmlspecialchars}">
+	    <input type="submit" name="import_file" value="Import" class="bigbutton"><br>
+	    <input type="checkbox" name="private" id="private"><label for="private">&nbsp;Import all links as private</label><br>
+	    <input type="checkbox" name="overwrite" id="overwrite"><label for="overwrite">&nbsp;Overwrite existing links</label>
+	</form>
+	</div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/includes.html

@@ -0,0 +1,10 @@
+<title>{$pagetitle}</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="format-detection" content="telephone=no" />
+<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
+<link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
+<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
+<link type="text/css" rel="stylesheet" href="inc/shaarli.css?version={$version|urlencode}#" />
+{if condition="is_file('inc/user.css')"}<link type="text/css" rel="stylesheet" href="inc/user.css?version={$version}#" />{/if}
+<script src="inc/jquery.min.js#"></script><script src="inc/jquery-ui.min.js#"></script>

tpl/install.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}{$timezone_js}</head>
+<body onload="document.installform.setlogin.focus();">
+<div style="margin-left:20px;">
+<h1>Shaarli</h1>	
+It looks like it's the first time you run Shaarli. Please configure it:<br>
+<div style="color:white !important;">
+<form method="POST" action="" name="installform" id="installform" style="border:1px solid black; padding:10 10 10 10;">
+<table border="0" cellpadding="20">
+<tr><td><b>Login:</b></td><td><input type="text" name="setlogin" size="30"></td></tr>
+<tr><td><b>Password:</b></td><td><input type="password" name="setpassword" size="30"></td></tr>
+{$timezone_html}
+<tr><td><b>Page title:</b></td><td><input type="text" name="title" size="30"></td></tr>
+<tr><td></td><td align="right"><input type="submit" name="Save" value="Save config" class="bigbutton"></td></tr>
+</table>
+</form>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/linklist.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">
+	{include="page.header"}
+	<div id="headerform" style="width:100%; white-space:nowrap;">
+	    <form method="GET" class="searchform" name="searchform" style="display:inline;"><input type="text" id="searchform_value" name="searchterm" style="width:30%" value=""> <input type="submit" value="Search" class="bigbutton"></form>
+	    <form method="GET" class="tagfilter" name="tagfilter" style="display:inline;margin-left:24px;"><input type="text" name="searchtags" id="tagfilter_value" style="width:10%" value=""> <input type="submit" value="Filter by tag" class="bigbutton"></form>
+	</div>
+</div>
+
+<div id="linklist">
+
+    {include="linklist.paging"}
+
+    {if="count($links)==0"}
+        <div id="searchcriteria">Nothing found.</i></div>
+    {else}
+        {if="$search_type=='fulltext'"}
+            <div id="searchcriteria">{$result_count} results for <i>{$search_crits}</i></div>
+        {/if}
+        {if="$search_type=='tags'"}
+            <div id="searchcriteria">{$result_count} results for tags <i>
+            {loop="search_crits"}
+                <span class="linktag" title="Remove tag"><a href="?removetag={$value|htmlspecialchars}">{$value|htmlspecialchars} <span style="border-left:1px solid #aaa; padding-left:5px; color:#6767A7;">x</span></a></span>
+            {/loop}</i></div>
+        {/if}
+    {/if}
+    <ul>
+        {loop="links"}
+        <li{if="$value.class"} class="{$value.class}"{/if}>
+            <div class="thumbnail">{$value.url|thumbnail}</div>
+            <div class="linkcontainer">
+                <span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title|htmlspecialchars}</a></span>
+                {if="isLoggedIn()"}
+                    <form method="GET" class="buttoneditform"><input type="hidden" name="edit_link" value="{$value.linkdate}"><input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit"></form>
+                    <form method="POST" class="buttoneditform"><input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
+                    <input type="hidden" name="token" value="{$token}"><input type="hidden" name="delete_link"><input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" class="button_delete" onClick="return confirmDeleteLink();"></form>
+                {/if}
+                <br>
+                {if="$value.description"}<div class="linkdescription"{if condition="$search_type=='permalink'"} style="max-height:none !important;"{/if}>{$value.description}</div>{/if}
+                {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
+                    <span class="linkdate" title="Permalink"><a href="?{$value.linkdate|smallHash}">{$value.localdate|htmlspecialchars} - permalink</a> - </span>
+                {else}
+                    <span class="linkdate" title="Short link here"><a href="?{$value.linkdate|smallHash}">permalink</a> - </span>
+                {/if}
+                <div style="position:relative;display:inline;"><a href="http://invx.com/code/qrcode/?code={$scripturl|urlencode}%3F{$value.linkdate|smallHash}&width=200&height=200" onclick="return false;" class="qrcode"><img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div> - 
+                <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span><br>
+                {if="$value.tags"}
+                    <div class="linktaglist">
+                    {loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a></span> {/loop}
+                    </div>
+                {/if}
+            </div>
+        </li>
+    {/loop}
+    </ul>
+
+    {include="linklist.paging"}
+
+</div>
+
+    {include="page.footer"}
+<script>
+$(document).ready(function() {
+	$('a.qrcode').click(function(){
+	  hide_qrcode();
+	  var link = $(this).attr('href');
+	  $(this).after('<div class="qrcode" onclick="hide_qrcode();return false;"><img src="'+link+'#" width="200" height="200"><br>click to close</div>');
+	});
+});
+function hide_qrcode() { $('div.qrcode').remove(); }
+</script>
+</body>
+</html>

tpl/linklist.paging.html

@@ -0,0 +1,20 @@
+<div class="paging">
+{if="isLoggedIn()"}
+    <div id="paging_privatelinks">
+        <a href="?privateonly">
+		{if="$privateonly"}
+		<img src="images/private_16x16_active.png#" width="16" height="16" title="Click to see all links" alt="Click to see all links">
+		{else}
+		<img src="images/private_16x16.png#" width="16" height="16" title="Click to see only private links" alt="Click to see only private links">
+		{/if}
+		</a>
+    </div>
+{/if}
+    <div id="paging_linksperpage">
+        Links per page: <a href="?linksperpage=20">20</a> <a href="?linksperpage=50">50</a> <a href="?linksperpage=100">100</a>
+        <form method="GET" style="display:inline;" class="linksperpage"><input type="text" name="linksperpage" size="2" style="height:15px;"></form>
+    </div>
+    {if="$previous_page_url"} <a href="{$previous_page_url}" id="paging_older">&#x25C4;Older</a> {/if}
+    <div id="paging_current">page {$page_current} / {$page_max} </div>
+    {if="$next_page_url"} <a href="{$next_page_url}" id="paging_newer">Newer&#x25BA;</a> {/if}
+</div>

tpl/loginform.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body{if="ban_canLogin()"} onload="document.loginform.login.focus();"{/if}>
+<div id="pageheader">
+	{include="page.header"}
+
+	<div id="headerform">
+{if="!ban_canLogin()"}
+    You have been banned from login after too many failed attempts. Try later.
+{else}
+    <form method="post" name="loginform">
+    Login: <input type="text" name="login" tabindex="1">&nbsp;&nbsp;&nbsp;
+    Password : <input type="password" name="password" tabindex="2">
+    <input type="submit" value="Login" class="bigbutton" tabindex="4"><br>
+    <input style="margin:10 0 0 40;" type="checkbox" name="longlastingsession" id="longlastingsession"  tabindex="3"><label for="longlastingsession">&nbsp;Stay signed in (Do not check on public computers)</label>
+    <input type="hidden" name="token" value="{$token}">
+    {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl|htmlspecialchars}">{/if}
+    </form>
+{/if}
+    </div>
+</div>
+
+{include="page.footer"}
+</body>
+</html>

tpl/page.footer.html

@@ -0,0 +1,20 @@
+<div id="footer">
+    <b><a href="http://sebsauvage.net/wiki/doku.php?id=php:shaarli">Shaarli {$version|htmlspecialchars}</a></b> - The personal, minimalist, super-fast, no-database delicious clone. By <a href="http://sebsauvage.net" target="_blank">sebsauvage.net</a>. Theme by <a href="http://blog.idleman.fr" target="_blank">idleman.fr</a>.
+</div>
+{if="$newversion"}
+    <div id="newversion"><span style="text-decoration:blink;">&#x25CF;</span> Shaarli {$newversion|htmlspecialchars} is <a href="http://sebsauvage.net/wiki/doku.php?id=php:shaarli#download">available</a>.</div>
+{/if}
+{if="isLoggedIn()"}
+<script language="JavaScript">function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
+{/if}
+
+{if="$GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()"}
+<script language="JavaScript">
+$(document).ready(function()
+{
+    $('#lf_tags').autocomplete({source:'{$source}?ws=tags',minLength:1});
+    $('#searchtags').autocomplete({source:'{$source}?ws=tags',minLength:1});
+    $('#fromtag').autocomplete({source:'{$source}?ws=singletag',minLength:1});
+});
+</script>
+{/if}

tpl/page.header.html

@@ -0,0 +1,26 @@
+
+    <div id="logo" title="Share your links !" onclick="document.location='?';"></div>
+    <div style="float:right; font-style:italic; color:#bbb; text-align:right; padding:0 5 0 0;" class="nomobile">Shaare your links...<br>
+        {if="!empty($linkcount)"}{$linkcount} links{/if}</div>
+    <span id="shaarli_title"><a href="?">{$shaarlititle}</a></span>
+  
+{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
+    {ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
+{else}
+    <a href="?" class="nomobile">Home</a>
+    {if="isLoggedIn()"}
+        <a href="?do=logout">Logout</a><a href="?do=tools">Tools</a><a href="?do=addlink"><b>Add link</b></a>
+    {elseif="$GLOBALS['config']['OPEN_SHAARLI']"}
+        <a href="?do=tools">Tools</a><a href="?do=addlink"><b>Add link</b></a>
+    {else}
+        <a href="?do=login">Login</a>
+    {/if}
+    <a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a>
+    <a href="{$feedurl}?do=atom{$searchcrits}" style="padding-left:10px;" class="nomobile">ATOM Feed</a>
+    <a href="?do=tagcloud">Tag cloud</a>
+    <a href="?do=picwall{$searchcrits}">Picture wall</a>
+    <a href="?do=daily">Daily</a>
+{/if}
+    <div class="clear"></div>
+
+

tpl/page.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+	<div id="pageheader">{include="page.header"}</div>
+    You body goes here...
+    {include="page.footer"}
+</body>
+</html>

tpl/picwall.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}
+<script src="inc/jquery.lazyload.min.js#"></script>
+</head>
+<body>
+<div id="pageheader">{include="page.header"}</div>
+<center>
+<div class="picwall_container">
+    {loop="linksToDisplay"}
+    <div class="picwall_pictureframe">
+	    {$value.thumbnail}<a href="{$value.permalink}"><span class="info">{$value.title|htmlspecialchars}</span></a>
+    </div>
+    {/loop}
+</div>
+</center>
+{include="page.footer"}
+</body>
+<script>
+$(document).ready(function() {
+    $("img.lazyimage").show().lazyload();
+});
+</script>
+</html>

tpl/picwall2.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">{include="page.header"}</div>
+<div style="background-color:#003;">
+    {loop="linksToDisplay"}
+    <div style="float:left;width:48%;border-right:2px solid white;height:120px;overflow:hide;">
+	    <div style="float:left;width:120px;text-align:center">{$value.thumbnail}</div>
+	    <a href="{$value.permalink}" style="color:yellow;font-weight:bold;text-decoration:none;">{$value.title|htmlspecialchars}</a><br>
+	    <span style="font-size:8pt;color:#eee;">{$value.description|htmlspecialchars}</span>
+	    <div style="clear:both;"></div>
+	</div><br>
+    {/loop}
+</div>
+
+{include="page.footer"}
+</body>
+</html>

tpl/readme.txt

@@ -0,0 +1,42 @@
+===== Shaarli template organisation =====
+
+Any Shaarli page should conform to this RainTPL template:
+
+-----------------------------------------------------
+<html>
+<head>{include="includes"}</head>
+<body>
+	<div id="pageheader">{include="page.header"}</div>
+    You body goes here...
+    {include="page.footer"}
+</body>
+</html>
+-----------------------------------------------------
+
+If you want to also add something in the page header (in the dark area), do it here:
+
+<div id="pageheader">{include="page.header"}My menu goes here...</div>
+
+
+Example: "Add new link" form:
+-----------------------------------------------------
+<html>
+<head>{include="includes"}</head>
+<body onload="document.addform.post.focus();">
+<div id="pageheader">
+	{include="page.header"}
+	<div id="headerform">
+		<form method="GET" action="" name="addform" class="addform">
+			<input type="text" name="post" style="width:50%;"> 
+			<input type="submit" value="Add link" class="bigbutton">
+		</form>
+	</div>
+</div>
+{include="page.footer"}
+</body>
+</html>
+-----------------------------------------------------
+
+
+
+

tpl/tagcloud.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+	<div id="pageheader">{include="page.header"}</div>
+<center>
+<div id="cloudtag">
+    {loop="tags"}
+    <span style="color:#99f; font-size:9pt; padding-left:5px; padding-right:2px;">{$value.count}</span><a href="?searchtags={$key|htmlspecialchars}" style="font-size:{$value.size}pt; font-weight:bold; color:black; text-decoration:none">{$key|htmlspecialchars}</a>
+    {/loop}
+</div>
+</center>
+{include="page.footer"}
+</body>
+</html>

tpl/tools.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">
+	{include="page.header"}
+	<div id="toolsdiv">
+		{if="!$GLOBALS['config']['OPEN_SHAARLI']"}<a href="?do=changepasswd"><b>Change password</b>  <span>: Change your password.</span></a><br><br>{/if}
+	    <a href="?do=configure"><b>Configure your Shaarli</b> <span>:  Change Title, timezone...</span></a><br><br>
+	    <a href="?do=changetag"><b>Rename/delete tags</b> <span>:  Rename or delete a tag in all links</span></a><br><br>
+	    <a href="?do=import"><b>Import</b> <span>:  Import Netscape html bookmarks (as exported from Firefox, Chrome, Opera, delicious...)</span></a> <br><br>
+	    <a href="?do=export"><b>Export</b> <span>:  Export Netscape html bookmarks (which can be imported in Firefox, Chrome, Opera, delicious...)</span></a><br><br>
+	<a class="smallbutton" onclick="alert('Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link...');return false;" href="javascript:javascript:(function(){var%20url%20=%20location.href;var%20title%20=%20document.title%20||%20url;window.open('{$pageabsaddr}?post='%20+%20encodeURIComponent(url)+'&amp;title='%20+%20encodeURIComponent(title)+'&amp;source=bookmarklet','_blank','menubar=no,height=390,width=600,toolbar=no,scrollbars=no,status=no,dialog=1');})();"><b>Shaare link</b></a> <a href="#" style="clear:none;"><span>&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).<br>&nbsp;&nbsp;&nbsp;&nbsp;Then click "Shaare link" button in any page you want to share.</span></a><br><br>
+	    <div class="clear"></div>
+	</div>
+</div>
+{include="page.footer"}
+</body>
+</html>