diff --git a/reader/css/reader.css b/reader/css/reader.css
new file mode 100644
index 0000000..6cb341a
--- /dev/null
+++ b/reader/css/reader.css
@@ -0,0 +1,100 @@
+body {
+ font-family: 'Courier New', monospace;
+}
+
+#titlebarContainer {
+ z-index: 99;
+ position: absolute;
+ width: 100%;
+ height: 200px;
+}
+
+#titlebar {
+ z-index: 98;
+ text-align: center;
+ border-radius: 4px;
+ position: relative;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ transform: translate(-50%, -50%);
+ background-color: rgba(256, 256, 256, 1);
+ left: 50%;
+ width: 80%;
+ height: 40px;
+ margin-top: 30px;
+}
+
+#titlebarText {
+ margin: 10px;
+ float: left;
+ color: black;
+}
+
+.titlebarButton {
+ background-color: rgba(0, 0, 0, 0);
+ float: right;
+ border: none;
+ height: 40px;
+ width: 40px;
+}
+
+#backButton {
+ float: left;
+}
+
+.titlebarIcon {
+ width: 20px;
+ height: 20px;
+}
+
+.imageView {
+ position: absolute;
+ margin: auto;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 95;
+}
+
+.imageLeft {
+ position: absolute;
+ width: 50%;
+ height: auto;
+ top : 0;
+ right: 50%;
+ z-index: 96;
+}
+
+.imageRight {
+ position: absolute;
+ width: 50%;
+ height: auto;
+ margin-top: 20px;
+ top: 0;
+ left: 50%;
+ z-index: 96;
+}
+
+#pageLeft {
+ position: absolute;
+ height: 100%;
+ width: 50%;
+ left: 0%;
+ z-index: 97;
+}
+
+#pageRight {
+ position: absolute;
+ height: 100%;
+ width: 50%;
+ left:50%;
+ z-index: 97;
+}
+
+#pageFooter {
+ z-index: 98;
+ position: fixed;
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
diff --git a/reader/db.json b/reader/db.json
new file mode 100644
index 0000000..bbe20cb
--- /dev/null
+++ b/reader/db.json
@@ -0,0 +1,21 @@
+[
+ {
+ "id" : "0", "title" : "Boku no Kokoro no Yabai Yatsu", "cid" : "bafybeihnoou2av5w2bzmwkl6hi25scyzz6sjwdfqp4cwq2ikf6dfmev3ta",
+ "chapters" : [
+ { "pages" : "18" }
+ ]
+ },
+ {
+ "id" : "1", "title" : "Otoyomegatari", "cid" : "bafybeigfivshobq4h5x5qwmttgqimaufmcjl6hpjcrsedj7wxxduphp7g4",
+ "chapters" : [
+ { "pages" : "39" }
+ ]
+ },
+ {
+ "id" : "2", "title" : "Spy X Family", "cid" : "bafybeibgnpbredeofwp364qomqpth55a6ui3oiy2ucm35fo3eimquoeob4",
+ "chapters" : [
+ { "pages" : "71" }
+ ]
+ }
+]
+
diff --git a/reader/img/back.png b/reader/img/back.png
new file mode 100644
index 0000000..837a438
Binary files /dev/null and b/reader/img/back.png differ
diff --git a/reader/img/double.png b/reader/img/double.png
new file mode 100644
index 0000000..5bcbed2
Binary files /dev/null and b/reader/img/double.png differ
diff --git a/reader/img/download.png b/reader/img/download.png
new file mode 100644
index 0000000..e218716
Binary files /dev/null and b/reader/img/download.png differ
diff --git a/reader/img/height.png b/reader/img/height.png
new file mode 100644
index 0000000..2ada78d
Binary files /dev/null and b/reader/img/height.png differ
diff --git a/reader/img/single.png b/reader/img/single.png
new file mode 100644
index 0000000..47dfd2a
Binary files /dev/null and b/reader/img/single.png differ
diff --git a/reader/img/width.png b/reader/img/width.png
new file mode 100644
index 0000000..d07a9a1
Binary files /dev/null and b/reader/img/width.png differ
diff --git a/reader/js/reader.js b/reader/js/reader.js
new file mode 100644
index 0000000..7ae0862
--- /dev/null
+++ b/reader/js/reader.js
@@ -0,0 +1,231 @@
+var layoutCurrent;
+var pageNo = 0;
+var pageCurrent = 1;
+var title;
+var cid;
+var content_url;
+var fitCurrent;
+var url = new URL(window.location.href);
+var manga = 0;
+var chapter = 0;
+
+// ---------------------------------------------------------
+// Functions
+// ---------------------------------------------------------
+
+function loadPage() {
+ console.log("loading page", pageCurrent, "out of", pageNo);
+ if(pageCurrent <= pageNo && pageCurrent > 0){
+ for(let i = 1; i <= pageNo; i++){
+ console.log(i);
+ document.getElementById(`image${i}`).style.visibility = "hidden";
+ }
+ if(layoutCurrent == "double"){
+ if(pageCurrent%2==0){
+ pageCurrent--;
+ }
+ let pagePair = pageCurrent+1;
+ document.getElementById(`image${pagePair}`).style.visibility = "visible";
+ }
+ document.getElementById("pageCounter").textContent = `${pageCurrent}/${pageNo}`;
+ document.getElementById(`image${pageCurrent}`).style.visibility = "visible";
+ }
+}
+
+function nextPage() {
+ if(layoutCurrent == "double"){
+ if(pageCurrent+2 <= pageNo){
+ pageCurrent += 2;
+ }
+ }
+ else{
+ if(pageCurrent+1 <= pageNo){
+ pageCurrent++;
+ }
+ }
+ loadPage();
+}
+
+function previousPage() {
+ if(layoutCurrent == "double"){
+ if(pageCurrent-2 >= 1){
+ pageCurrent -= 2;
+ }
+ }
+ else{
+ if(pageCurrent-1 >= 1){
+ pageCurrent--;
+ }
+ }
+ loadPage();
+}
+
+function layoutSingle(){
+ layoutCurrent = "single";
+ fitHeight();
+ for (let i = 1; i <= pageNo; i++) {
+ console.log(`image${i}`);
+ document.getElementById(`image${i}`).className = "imageView";
+ }
+ document.getElementById("layoutIcon").src = "img/single.png";
+}
+
+function layoutDouble(){
+ fitHeight();
+ layoutCurrent = "double";
+ for (let i = 1; i <= pageNo; i++) {
+ let side = "Right";
+ if(i%2==0){
+ side = "Left";
+ }
+ document.getElementById(`image${i}`).className = `image${side}`;
+ }
+ document.getElementById("layoutIcon").src = "img/double.png";
+}
+
+function fitWidth(){
+ if(layoutCurrent == "single"){
+ fitCurrent = "width";
+ var items = document.getElementsByClassName("imageView");
+ for(var i = 0; i < items.length; i++){
+ items.item(i).style.width = "100%";
+ items.item(i).style.height = "auto";
+ }
+ document.getElementById("fitIcon").src = "img/width.png";
+ }
+}
+
+function fitHeight(){
+ if(layoutCurrent == "single"){
+ fitCurrent = "height";
+ var items = document.getElementsByClassName("imageView");
+ for(var i = 0; i < items.length; i++){
+ items.item(i).style.width = "auto";
+ items.item(i).style.height = "100%";
+ }
+ document.getElementById("fitIcon").src = "img/height.png";
+ }
+}
+
+// ---------------------------------------------------------
+// Event handlers
+// ---------------------------------------------------------
+
+document.addEventListener("keydown", function (e) {
+ console.log("key press");
+ e = e || window.event;
+ switch (e.keyCode) {
+ case 39:
+ case 76:
+ console.log("right");
+ previousPage();
+ break;
+ case 37:
+ case 72:
+ console.log("left");
+ nextPage();
+ break;
+ default: return;
+ }
+ e.preventDefault();
+});
+
+document.getElementById("pageLeft").addEventListener("click", function (e) {
+ nextPage();
+});
+
+document.getElementById("pageRight").addEventListener("click", function (e) {
+ previousPage();
+});
+
+document.getElementById("downloadButton").addEventListener("click", function (e) {
+ //document.getElementById("downloadButton").style.background-color = "rgb(0, 0, 0, 0.2)";
+});
+
+document.getElementById("layoutButton").addEventListener("click", function (e) {
+ if(layoutCurrent == "single"){
+ layoutDouble();
+ }
+ else{
+ layoutSingle();
+ }
+ loadPage();
+});
+
+document.getElementById("fitButton").addEventListener("click", function (e) {
+ if(fitCurrent == "height"){
+ fitWidth();
+ }
+ else{
+ fitHeight();
+
+ }
+ loadPage();
+});
+
+document.getElementById("titlebarContainer").addEventListener("mouseenter", function () {
+ document.getElementById("titlebar").style.visibility = "visible";
+});
+
+document.getElementById("titlebarContainer").addEventListener("mouseleave", function () {
+ document.getElementById("titlebar").style.visibility = "hidden";
+});
+
+if(url.searchParams.has("manga")){
+ manga = url.searchParams.get("manga");
+}
+if(url.searchParams.has("chapter")){
+ chapter = url.searchParams.get("chapter");
+}
+
+// ---------------------------------------------------------
+// parse json data
+// ---------------------------------------------------------
+
+var xmlhttp = new XMLHttpRequest();
+xmlhttp.onreadystatechange = function () {
+ if(this.readyState == 4 && this.status == 200){
+ var res = JSON.parse(this.responseText);
+ console.log("parsing json", this.responseText);
+ pageNo = res[manga].chapters[chapter].pages;
+ // "https://ipfs.io/api/v0/ls/"+res[manga][chapter]["cid"];
+ title = res[manga].title;
+ cid = res[manga].cid;
+ console.log(pageNo, title, cid);
+
+// ---------------------------------------------------------
+// Initialize
+// ---------------------------------------------------------
+
+ document.getElementById("titlebar").style.visibility = "hidden";
+
+ document.getElementById("pageCounter").innerHtml = `${pageCurrent}/${pageNo}`;
+ document.getElementById("titlebarText").innerHtml = `${title}`;
+ document.title = `${title}`;
+ document.getElementById("pageView").innerHtml = "";
+
+ for (let i = 1; i <= pageNo; i++) {
+ var img = document.createElement("img");
+ img.setAttribute("draggable", "false");
+ img.setAttribute("src", `https://ipfs.io/ipfs/${cid}/${i}.jpg`);
+ img.id = `image${i}`;
+ img.style.visibility = "hidden";
+ document.getElementById("pageView").appendChild(img);
+ }
+
+ console.log(document.getElementById("pageView").innerHtml);
+
+ if(pageNo > 0){
+ layoutSingle();
+ fitHeight();
+ loadPage();
+ }
+ else{
+ console.log("no pages to load");
+ }
+ }
+}
+xmlhttp.open("GET", "https://amangathing.ddns.net/db.json", true);
+xmlhttp.send();
+
+
diff --git a/reader/reader.html b/reader/reader.html
new file mode 100644
index 0000000..6518a8d
--- /dev/null
+++ b/reader/reader.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+