<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EPUB reader</title>
<style type="text/css">
body{
font-family: "luxi-serif-1","luxi-serif-2",serif;
}
h1, h2, h3, h4, h5{
text-align: center;
#contents{
width: 640px;
margin:10px auto;
padding: 20px;
background: #D3CDAC;
p{
text-align: justify;
img{
//display: block;
//margin: 5px 0;
max-width: 640px;
hr{
width: 90%;
height: 0px;
border:0;
border-top: 1px dashed #B75F14;
margin: 10px auto;
.chapter{
border-bottom: 5px dotted #604328;
padding-bottom: 10px;
margin-bottom: 10px;
.center{
</style>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).observe("dom:loaded", function(){
new Ajax.Request("/contents",{
method:"post",
onComplete: function(response){
var contents = {toc:[], flow:[]};
try{
contents = response.responseText.evalJSON();
}catch(E){}
renderPage(contents);
});
function renderPage(contents){
if(!contents.flow.length)return;
var chapter = contents.flow.shift();;
new Ajax.Request("/chapter/"+chapter.id,{
$("contents").innerHTML += "<div class=\"chapter\">"+response.responseText+"</div>";
if(contents.flow.length){
</script>
<script type="text/javascript" src="http://use.typekit.com/qbv6mfk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="toc"></div>
<div id="contents"></div>
</body>
</html>
