en macosx se usa el folder del sistema en la sidebar

release/server/docroot/css/reset.css

@@ -0,0 +1,46 @@
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
+{
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-weight: inherit;
+	font-style: inherit;
+	font-size: 100%;
+	font-family: inherit;
+	vertical-align: baseline;
+}
+/* remember to define focus styles! */
+:focus
+{
+	outline: 0;
+}
+body
+{
+	line-height: 1;
+	color: black;
+}
+ol, ul
+{
+	list-style: none;
+}
+/* tables still need 'cellspacing="0"' in the markup */
+table, td, tr
+{
+	border: 0;
+	border-collapse: separate;
+	border-spacing: 0;
+}
+caption, th, td
+{
+	text-align: left;
+	font-weight: normal;
+}
+blockquote:before, blockquote:after, q:before, q:after
+{
+	content: "";
+}
+blockquote, q
+{
+	quotes: "" "";
+}

release/server/docroot/css/styles_ipad.css

@@ -0,0 +1,354 @@
+body{
+	background-color: #363636;
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+#content{
+	width: 712px;
+	background: url("../images/topbox.jpg") no-repeat scroll 0 0 #FFF;
+	margin: 17px auto 0;
+	padding: 22px 0 22px 22px;	
+
+}
+
+#contentLibraries{
+	width: 256px;
+	background: url("../images/topboxLibraries.jpg") no-repeat scroll 0 0 #FFF;
+	margin: 16px auto 0;
+	padding: 16px;	
+}
+
+.sombraLibraries{
+	background: url("../images/bottomboxLibraries.jpg") no-repeat scroll bottom center #FFF;
+	width: 288px;
+	height: 14px;
+	margin: 0 auto;
+}
+
+.index{
+	width: 718px;
+	background: url("../images/topbox.jpg") no-repeat scroll 0 0 #FFF;
+	margin: 7px auto 0;
+	padding: 16px 0px 0px 16px;	
+}
+
+.folder
+{
+float: left;
+}
+
+.cover
+{
+float: left;
+}
+
+.cover img
+{
+ -webkit-box-shadow: 0px 0px 5px #333;
+}
+
+
+.info
+{
+padding: 8px 0px 0px 0px;
+float: left;
+position: relative;
+height: 115px;
+width: 135px;
+
+}
+
+.buttons
+{
+position:absolute;
+bottom:0px;
+left:0px;
+}
+
+#itemContainer li
+{
+float: left;
+width: 225px;
+height: 120px;
+margin: 20px 12px 20px 0;
+}
+
+
+#itemContainer a
+{
+	text-decoration: none;
+	font-family: Arial;
+	color: #FFF;
+	font-size: 13px;
+	
+}
+
+.browseButton
+{
+	width: 57px;
+	height: 22px;
+	background: url("../images/bt_browse.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	text-align:center;
+	display: block;
+	float: left;
+	padding: 4px 0 0 0;
+	margin: 0 0 0 4px;
+}
+
+.importButton
+{
+	width: 57px;
+	height: 18px;
+	background: url("../images/bt_import.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	text-align:center;
+	display: block;
+	float: left;
+	margin: 0 0 0 4px;
+	padding: 4px 0 0 0;
+}
+
+.importedButton
+{
+	width: 67px;
+	height: 18px;
+	background: url("../images/bt_import.jpg") no-repeat scroll 0 -22px transparent;
+	border: none;
+	text-align:center;
+	display: block;
+	float: left;
+	margin: 0 0 0 4px;
+	padding: 4px 0 0 0;
+	text-decoration: none;
+	font-family: Arial;
+	color: #FFF;
+	font-size: 13px;
+}
+
+#librariesList a
+{
+	width: 256px;
+	height: 32px;
+	background: url("../images/bt_library_iphone.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	display: block;
+	padding: 9px 0 0 40px;
+	text-decoration: none;
+	font-family: Arial;
+	color: #FFF;
+	font-size: 13px;
+}
+
+#topIndex
+{
+	width: 100%;
+	float: right;
+	margin: 0 24px 15px 0;
+}
+
+#topIndex a
+{
+	float: right;
+}
+
+#topIndex .next{
+	width: 29px;
+	height: 29px;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 5px 0 0 0;
+	display: block;
+	background: url("../images/bt_next.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+
+#topIndex .previous{
+	width: 29px;
+	height: 29px;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 5px 0 0 0;
+	display: block;
+	background: url("../images/bt_previous.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+
+#topIndex .up{
+	width: 92px;
+	height: 29px;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 5px 0 0 0;
+	background: url("../images/bt_libraries.jpg") no-repeat scroll 0 0 transparent;
+	color: #FFF;
+	font-size: 17px;
+	display: block;
+	text-decoration: none;
+	font-family: Arial;
+	font-weight: bold;
+	text-align:center;
+}
+
+#topIndex .libraries{
+	width: 92px;
+	height: 29px;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 6px 0 0 0;
+	background: url("../images/bt_libraries.jpg") no-repeat scroll 0 0 transparent;
+	color: #FFF;
+	font-size: 17px;
+	display: block;
+	text-decoration: none;
+	font-family: Arial;
+	font-weight: bold;
+	text-align:center;
+}
+
+#libraryList li
+{
+
+}
+
+#libraryList a
+{
+	width: 256px;
+	height: 32px;
+	background: url("../images/bt_library.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	padding: 8px 0 0 40px;
+	color: #FFF;
+	font-size: 14px;
+	display: block;
+	text-decoration: none;
+	font-family: Arial;
+}
+
+
+#alphaIndex a, #pageIndex a{
+	width: 29px;
+	height: 29px;
+	background: url("../images/bt_index.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 5px 0 0 0;
+	color: #FFF;
+	font-size: 20px;
+	display: block;
+	text-decoration: none;
+	font-family: Arial;
+	font-weight: bold;
+	text-align:center;
+}
+
+#alphaIndex li, #pageIndex li{
+	float: left;
+}
+
+#pageIndex .current{
+	background: url("../images/bt_current.jpg") no-repeat scroll 0 0 transparent;
+	color: #EBEBEB;
+}
+
+#alphaIndex .next, #pageIndex .next {
+	background: url("../images/bt_next.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+#alphaIndex .previous, #pageIndex .previous{
+	background: url("../images/bt_previous.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+#alphaIndex .first, #pageIndex .first{
+	background: url("../images/bt_first.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+#alphaIndex .last, #pageIndex .last{
+	background: url("../images/bt_last.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+	#content h1, #contentLibraries h1{
+		color: #696969;
+		font-weight: bold;
+		font-size: 21px;
+		margin: 0 0 5px 0;
+	}
+	#content h2, #contentLibraries h2{
+		color: #000;
+		font-weight: bold;
+		font-size: 12px;
+		margin: 0 0 16px 0;
+	}
+	
+	.inputs_login{
+		width: 256px;
+		height: 64px;
+		background: url("../images/fnd_inputs.jpg") no-repeat scroll 0 0 #FFF;
+		margin: 0 0 18px 0;
+	}
+		.username{
+			width: 200px;
+			height: 24px;
+			background: url("../images/fnd_input_username.jpg") no-repeat scroll 0 0 #2b2b2b;
+			border: none;
+			padding: 0 0 0 44px;
+			margin: 5px 0 6px 8px;
+			font-size: 14px;
+			color: #6e6e6e;
+		}
+		.pass{
+			width: 200px;
+			height: 24px;
+			background: url("../images/fnd_input_pass.jpg") no-repeat scroll 0 0 #2b2b2b;
+			border: none;
+			padding: 0 0 0 44px;
+			margin: 0 0 0 8px;
+			font-size: 14px;
+			color: #6e6e6e;
+		}
+		.button_sign{
+			width: 86px;
+			height: 30px;
+			background: url("../images/bt_login.jpg") no-repeat scroll 0 0 transparent;
+			border: none;
+			margin: 0;
+			padding: 0;
+			color: #FFF;
+			font-size: 14px;
+			float: left;
+		}
+		.infor{
+			color: #666;
+			font-size: 8px;
+			float: left;
+			width: 112px;
+			margin: 0 0 0 8px;
+			line-height: 120%;
+		}
+.sombra{
+	background: url("../images/bottombox.jpg") no-repeat scroll bottom center #FFF;
+	width: 734px;
+	height: 13px;
+	margin: 0 auto;
+}
+.clear{
+	height: 2px;
+	clear: both;
+}
+
+.title{
+	font-family: Arial;
+	font-weight: bold;
+	font-size: 12px;
+	margin: 0 0 0 6px;
+	color: #333;
+	overflow: hidden;
+	word-wrap: break-word;
+	height: 80px;
+}

release/server/docroot/css/styles_iphone.css

@@ -0,0 +1,342 @@
+body{
+	background-color: #363636;
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+#content{
+	width: 256px;
+	background: url("../images/topbox.jpg") no-repeat scroll 0 0 #FFF;
+	margin: 16px auto 0;
+	padding: 16px;	
+}
+
+.folder
+{
+float: left;
+}
+
+.cover
+{
+float: left;
+}
+
+.cover img
+{
+ -webkit-box-shadow: 0px 0px 5px #333;
+}
+
+.index{
+	width: 272px;
+	background: url("../images/topbox.jpg") no-repeat scroll 0 0 #FFF;
+	margin: 7px auto 0;
+	padding: 16px 0px 0px 16px;	
+}
+
+.info
+{
+padding: 8px 0px 0px 0px;
+float: left;
+position: relative;
+height: 110px;
+width: 160px;
+}
+
+.buttons
+{
+position:absolute;
+bottom:0px;
+left:0px;
+}
+
+#itemContainer li
+{
+float: left;
+width: 250px;
+height: 120px;
+margin: 20px 0 15px 0;
+}
+
+#itemContainer a
+{
+	text-decoration: none;
+	font-family: Arial;
+	color: #FFF;
+	font-size: 13px;
+	
+}
+
+.browseButton
+{
+	width: 67px;
+	height: 24px;
+	background: url("../images/bt_browse.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	text-align:center;
+	display: block;
+	float: left;
+	padding: 5px 0 0 0;
+	margin: 0 0 0 8px;
+}
+
+.importButton
+{
+	width: 67px;
+	height: 20px;
+	background: url("../images/bt_import.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	text-align:center;
+	display: block;
+	float: left;
+	margin: 0 0 0 8px;
+	padding: 4px 0 0 0;
+}
+
+.importedButton
+{
+	width: 77px;
+	height: 20px;
+	background: url("../images/bt_import.jpg") no-repeat scroll 0 -24px transparent;
+	border: none;
+	text-align:center;
+	display: block;
+	float: left;
+	margin: 0 0 0 4px;
+	padding: 4px 0 0 0;
+	text-decoration: none;
+	font-family: Arial;
+	color: #FFF;
+	font-size: 13px;
+}
+
+#librariesList li
+{
+
+
+}
+
+#librariesList a
+{
+	width: 256px;
+	height: 32px;
+	background: url("../images/bt_library_iphone.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	display: block;
+
+	padding: 9px 0 0 40px;
+	text-decoration: none;
+	font-family: Arial;
+	color: #FFF;
+	font-size: 13px;
+}
+
+#topIndex
+{
+	width: 100%;
+	margin: 7px 0px 7px 0px;
+}
+
+#topIndex a
+{
+	float: left;
+}
+
+#topIndex .next{
+	width: 29px;
+	height: 29px;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 5px 0 0 0;
+	display: block;
+	background: url("../images/bt_next.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+
+#topIndex .previous{
+	width: 29px;
+	height: 29px;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 5px 0 0 0;
+	display: block;
+	background: url("../images/bt_previous.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+
+#topIndex .up{
+	width: 58px;
+	height: 29px;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 5px 0 0 0;
+	background: url("../images/bt_up.jpg") no-repeat scroll 0 0 transparent;
+	color: #FFF;
+	font-size: 17px;
+	display: block;
+	text-decoration: none;
+	font-family: Arial;
+	font-weight: bold;
+	text-align:center;
+}
+
+#topIndex .libraries{
+	width: 92px;
+	height: 29px;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 6px 0 0 0;
+	background: url("../images/bt_libraries.jpg") no-repeat scroll 0 0 transparent;
+	color: #FFF;
+	font-size: 17px;
+	display: block;
+	text-decoration: none;
+	font-family: Arial;
+	font-weight: bold;
+	text-align:center;
+}
+
+#libraryList li
+{
+
+}
+
+#libraryList a
+{
+	width: 256px;
+	height: 32px;
+	background: url("../images/bt_library.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	padding: 8px 0 0 40px;
+	color: #FFF;
+	font-size: 14px;
+	display: block;
+	text-decoration: none;
+	font-family: Arial;
+}
+
+
+#alphaIndex a, #pageIndex a{
+	width: 29px;
+	height: 29px;
+	background: url("../images/bt_index.jpg") no-repeat scroll 0 0 transparent;
+	border: none;
+	margin: 0 8px 4px 0;
+	padding: 5px 0 0 0;
+	color: #FFF;
+	font-size: 20px;
+	display: block;
+	text-decoration: none;
+	font-family: Arial;
+	font-weight: bold;
+	text-align:center;
+}
+
+#alphaIndex li, #pageIndex li{
+	float: left;
+}
+
+#pageIndex .current{
+	background: url("../images/bt_current.jpg") no-repeat scroll 0 0 transparent;
+	color: #EBEBEB;
+}
+
+#alphaIndex .next, #pageIndex .next{
+	background: url("../images/bt_next.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+#alphaIndex .previous, #pageIndex .previous{
+	background: url("../images/bt_previous.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+#alphaIndex .first, #pageIndex .first{
+	background: url("../images/bt_first.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+#alphaIndex .last, #pageIndex .last{
+	background: url("../images/bt_last.jpg") no-repeat scroll 0 0 transparent;
+	padding: 0;
+	text-indent: -9999px;
+}
+	#content h1{
+		color: #696969;
+		font-weight: bold;
+		font-size: 21px;
+		margin: 0 0 5px 0;
+	}
+	#content h2{
+		color: #000;
+		font-weight: bold;
+		font-size: 12px;
+		margin: 0 0 16px 0;
+	}
+	
+	.inputs_login{
+		width: 256px;
+		height: 64px;
+		background: url("../images/fnd_inputs.jpg") no-repeat scroll 0 0 #FFF;
+		margin: 0 0 18px 0;
+	}
+		.username{
+			width: 200px;
+			height: 24px;
+			background: url("../images/fnd_input_username.jpg") no-repeat scroll 0 0 #2b2b2b;
+			border: none;
+			padding: 0 0 0 44px;
+			margin: 5px 0 6px 8px;
+			font-size: 14px;
+			color: #6e6e6e;
+		}
+		.pass{
+			width: 200px;
+			height: 24px;
+			background: url("../images/fnd_input_pass.jpg") no-repeat scroll 0 0 #2b2b2b;
+			border: none;
+			padding: 0 0 0 44px;
+			margin: 0 0 0 8px;
+			font-size: 14px;
+			color: #6e6e6e;
+		}
+		.button_sign{
+			width: 86px;
+			height: 30px;
+			background: url("../images/bt_login.jpg") no-repeat scroll 0 0 transparent;
+			border: none;
+			margin: 0;
+			padding: 0;
+			color: #FFF;
+			font-size: 14px;
+			float: left;
+		}
+		.infor{
+			color: #666;
+			font-size: 8px;
+			float: left;
+			width: 112px;
+			margin: 0 0 0 8px;
+			line-height: 120%;
+		}
+.sombra{
+	background: url("../images/bottombox.jpg") no-repeat scroll bottom center #FFF;
+	width: 288px;
+	height: 14px;
+	margin: 0 auto;
+}
+.clear{
+	height: 2px;
+	clear: both;
+}
+
+.title{
+	font-family: Arial;
+	font-weight: bold;
+	font-size: 14px;
+	margin: 0 0 0 6px;
+	color: #333;
+	overflow: hidden;
+	word-wrap: break-word;
+	height: 80px;
+}

release/server/docroot/login.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>	
+	<link rel="stylesheet" href="css/reset.css" type="text/css" />
+	<link rel="stylesheet" href="css/styles.css" type="text/css" />
+	<title>Login</title>	
+</head>
+<body>
+	<div id="content">
+		
+		<h1>LOGIN</h1>
+		<h2>YACREADER LIBRARY</h2>
+		
+		<form>
+			<div class="inputs_login">
+				<input type="text" class="username" value="username" name="username" />
+				<input type="text" class="pass" value="password" name="pass" />
+			</div>
+			<input class="button_sign" type="submit" value="Sign in" />
+			<p class="infor">If you have forgotten your login information, please reset it on the YACReaderLibrary</p>
+			<div class="clear">&nbsp;</div>			
+		</form>				
+	</div>
+	<div class="sombra">&nbsp;</div>
+</body>
+</html>

release/server/templates/folder_ipad.tpl

@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>	
+	<link rel="stylesheet" href="/css/reset.css" type="text/css" />
+	<link rel="stylesheet" href="/css/styles.css" type="text/css" />
+	<title>Folder</title>	
+</head>
+<body>
+	<div id="content">
+		
+		<h1>BROWSE AND IMPORT</h1>
+		<h2>{folder.name} {if pageIndex} - PAGE {page} OF {pages}{end pageIndex}</h2>
+		
+		<div id="topIndex"> {if pageIndex} <a class="next" href="{page.next}">next</a> <a class="previous" href="{page.previous}">previous</a> {end pageIndex} <a class="up" href="{upurl}">up</a>  <a class="libraries" href="/">Libraries</a>  </div>
+		<!--<a href="javascript:javascript:history.go(-1)">up</a>-->
+		<div class="folderContent">
+			<ul id="itemContainer">
+				{loop element}
+					<li><div class="{element.class}"><img style="width: {element.image.width}" src="{element.image.url}"/></div> <div class="info"> <div class="title"><p>{element.name}</p> </div><div class="buttons"> {element.download} {element.browse}  </div></div></li>
+				{end element}
+			</ul>
+			<div class="clear">&nbsp;</div>
+		</div>
+	</div>
+	<div class="sombra">&nbsp;</div>
+	
+	{if alphaIndex}
+	
+	<div class="index">
+	<ul id="alphaIndex">
+	{loop index} 
+		
+		<li>  <a href="{index.url}"> {index.indexname} </a> </li>
+	
+	{end index}
+	</ul>
+	<div class="clear">&nbsp;</div>
+	</div>
+	<div class="sombra">&nbsp;</div>
+	
+	{end alphaIndex}
+	
+	
+	{if pageIndex}
+	
+	<div class="index">
+	<ul id="pageIndex">
+		<li> <a class="first" href="{page.first}">first</a> </li>
+		<li> <a class="previous" href="{page.previous}">previous</a> </li>
+		
+		{loop page} <li>  <a class="{page.current}" href="{page.url}"> {page.number} </a> </li> {end page} 
+		
+		<li> <a class="next" href="{page.next}">next</a> </li>
+		<li> <a class="last" href="{page.last}">last</a> </li>
+	</ul>
+	<div class="clear">&nbsp;</div>
+	</div>
+	<div class="sombra">&nbsp;</div>
+	{end pageIndex}
+	
+	
+</body>
+</html>

release/server/templates/folder_iphone.tpl

@@ -0,0 +1,62 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>	
+	<link rel="stylesheet" href="/css/reset.css" type="text/css" />
+	<link rel="stylesheet" href="/css/styles.css" type="text/css" />
+	<title>Folder</title>	
+</head>
+<body>
+	<div id="content">
+		
+		<h1>BROWSE AND IMPORT</h1>
+		<h2>{folder.name} {if pageIndex} - PAGE {page} OF {pages} {end pageIndex}</h2>
+		
+		<div id="topIndex"> <a class="libraries" href="/">Libraries</a> <a class="up" href="{upurl}">up</a> {if pageIndex} <a class="previous" href="{page.previous}">previous</a><a class="next" href="{page.next}">next</a>  {end pageIndex}   </div>
+		<!--<a href="javascript:javascript:history.go(-1)">up</a>-->
+		<div class="folderContent">
+			<ul id="itemContainer">
+				{loop element}
+					<li><div class="{element.class}"><img style="width: {element.image.width}" src="{element.image.url}"/></div> <div class="info"> <div class="title" > <p>{element.name}</p> </div> <div class="buttons"> {element.download} {element.browse}  </div></div></li>
+				{end element}
+			</ul>
+			<div class="clear">&nbsp;</div>
+		</div>	
+	</div>
+	<div class="sombra">&nbsp;</div>
+	
+	{if alphaIndex}
+	<div class="index">
+	<ul id="alphaIndex">
+	{loop index} 
+		
+		<li>  <a href="{index.url}"> {index.indexname} </a> </li>
+	
+	{end index}
+	</ul>
+	<div class="clear">&nbsp;</div>
+	</div>
+	<div class="sombra">&nbsp;</div>
+	
+	{end alphaIndex}
+	
+	
+	{if pageIndex}
+			
+	<div class="index">
+	<ul id="pageIndex">
+		<li> <a class="first" href="{page.first}">first</a> </li>
+		<li> <a class="previous" href="{page.previous}">previous</a> </li>
+		
+		{loop page} <li>  <a class="{page.current}" href="{page.url}"> {page.number} </a> </li> {end page} 
+		
+		<li> <a class="next" href="{page.next}">next</a> </li>
+		<li> <a class="last" href="{page.last}">last</a> </li>
+	</ul>
+	<div class="clear">&nbsp;</div>
+	</div>
+	<div class="sombra">&nbsp;</div>
+	
+	{end pageIndex}
+	
+</body>
+</html>

release/server/templates/libraries_ipad.tpl

@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>	
+	<link rel="stylesheet" href="/css/reset.css" type="text/css" />
+	<link rel="stylesheet" href="/css/styles.css" type="text/css" />
+	<title>Login</title>	
+</head>
+<body>
+	<div id="contentLibraries">
+		<h1>LIBRARIES</h1>
+		<h2>Select a comic library</h2>
+		<p>
+			<ul id="librariesList"> 
+				{loop library}
+					<li><a href="/library/{library.name}/folder/1">{library.label}</a></li>
+				{end library}
+			</ul>
+		</p>
+	</div>
+	<div class="sombraLibraries">&nbsp;</div>
+	</body>
+</html>

release/server/templates/libraries_iphone.tpl

@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>	
+	<link rel="stylesheet" href="/css/reset.css" type="text/css" />
+	<link rel="stylesheet" href="/css/styles.css" type="text/css" />
+	<title>Login</title>	
+</head>
+<body>
+	<div id="content">
+		<h1>LIBRARIES</h1>
+		<h2>Select a comic library</h2>
+		<p>
+			<ul id="librariesList">
+				{loop library}
+					<li><a href="/library/{library.name}/folder/1">{library.label}</a></li>
+				{end library}
+			</ul>
+		</p>
+	</div>
+	<div class="sombra">&nbsp;</div>
+	</body>
+</html>