diff --git a/zhetic-poc/contact.html b/zhetic-poc/contact.html new file mode 100644 index 0000000..31a17aa --- /dev/null +++ b/zhetic-poc/contact.html @@ -0,0 +1,21 @@ + + + /a/ manga thing + + + + +
+ +

/a/ manga thing

+ | Home + | Manga + | Contributing + | Contact | +
+

+      + The project lives on irc.rizon.net#a-manga-thing +

+ + diff --git a/zhetic-poc/contributing.html b/zhetic-poc/contributing.html new file mode 100644 index 0000000..6c8e8be --- /dev/null +++ b/zhetic-poc/contributing.html @@ -0,0 +1,22 @@ + + + /a/ manga thing + + + + +
+ +

/a/ manga thing

+ | Home + | Manga + | Contributing + | Contact | +
+

+      + This service relies on a distributed network of hosts to serve content. The easiest way to help is to keep your ipfs daemon on in the background and use the dashboard on port 5001 to pin content you are interested in. If you have bandwidth to spare, consider consolidating your config files with ours and become a more permanent part of the network. +

+ + + diff --git a/zhetic-poc/css/reader.css b/zhetic-poc/css/reader.css new file mode 100644 index 0000000..3a609e9 --- /dev/null +++ b/zhetic-poc/css/reader.css @@ -0,0 +1,99 @@ +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; +} + +.titlebarIcon { + width: 20px; + height: 20px; +} + +.imageView { + position: absolute; + height: 100%; + width: auto; + margin: auto; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 95; +} + +.imageLeft { + position: absolute; + width: 50%; + height: auto; + margin-top: 20px; + 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/zhetic-poc/css/stylesheet.css b/zhetic-poc/css/stylesheet.css new file mode 100644 index 0000000..237b7f3 --- /dev/null +++ b/zhetic-poc/css/stylesheet.css @@ -0,0 +1,30 @@ +body { + font-family: 'Courier New', monospace; + margin-left: 15%; + margin-right: 15%; + margin-top: 2%; +} + +table { + width: 100%; +} + +.thumbnail { + height: 250px; + width: 175px; +} + +.cover { + height: 250px; + width: 175px; +} + +.description { + padding: 25px; + vertical-align: top; +} + +#search { + width: 50%; + height: 15px; +} diff --git a/zhetic-poc/db.json b/zhetic-poc/db.json new file mode 100644 index 0000000..2e4514f --- /dev/null +++ b/zhetic-poc/db.json @@ -0,0 +1,6 @@ +[ + { "id" : "0", "title" : "Boku no Kokoro no Yabai Yatsu", "cid" : "bafybeihnoou2av5w2bzmwkl6hi25scyzz6sjwdfqp4cwq2ikf6dfmev3ta", "pageNo" : "18" }, + { "id" : "1", "title" : "Otoyomegatari", "cid" : "bafybeigfivshobq4h5x5qwmttgqimaufmcjl6hpjcrsedj7wxxduphp7g4", "pageNo" : "39" }, + { "id" : "2", "title" : "Spy X Family", "cid" : "bafybeibgnpbredeofwp364qomqpth55a6ui3oiy2ucm35fo3eimquoeob4", "pageNo" : "71" } +] + diff --git a/zhetic-poc/img/back.png b/zhetic-poc/img/back.png new file mode 100644 index 0000000..837a438 Binary files /dev/null and b/zhetic-poc/img/back.png differ diff --git a/zhetic-poc/img/bokuyaba_cover.jpg b/zhetic-poc/img/bokuyaba_cover.jpg new file mode 100644 index 0000000..0a5b74a Binary files /dev/null and b/zhetic-poc/img/bokuyaba_cover.jpg differ diff --git a/zhetic-poc/img/diagram1.png b/zhetic-poc/img/diagram1.png new file mode 100644 index 0000000..c5902d0 Binary files /dev/null and b/zhetic-poc/img/diagram1.png differ diff --git a/zhetic-poc/img/diagram2.png b/zhetic-poc/img/diagram2.png new file mode 100644 index 0000000..6b1db94 Binary files /dev/null and b/zhetic-poc/img/diagram2.png differ diff --git a/zhetic-poc/img/double.png b/zhetic-poc/img/double.png new file mode 100644 index 0000000..5bcbed2 Binary files /dev/null and b/zhetic-poc/img/double.png differ diff --git a/zhetic-poc/img/download.png b/zhetic-poc/img/download.png new file mode 100644 index 0000000..e218716 Binary files /dev/null and b/zhetic-poc/img/download.png differ diff --git a/zhetic-poc/img/height.png b/zhetic-poc/img/height.png new file mode 100644 index 0000000..2ada78d Binary files /dev/null and b/zhetic-poc/img/height.png differ diff --git a/zhetic-poc/img/logo.png b/zhetic-poc/img/logo.png new file mode 100644 index 0000000..0ae07ce Binary files /dev/null and b/zhetic-poc/img/logo.png differ diff --git a/zhetic-poc/img/otoyomegatari_cover.jpg b/zhetic-poc/img/otoyomegatari_cover.jpg new file mode 100644 index 0000000..5b658b6 Binary files /dev/null and b/zhetic-poc/img/otoyomegatari_cover.jpg differ diff --git a/zhetic-poc/img/out.png b/zhetic-poc/img/out.png new file mode 100644 index 0000000..0d377ba Binary files /dev/null and b/zhetic-poc/img/out.png differ diff --git a/zhetic-poc/img/single.png b/zhetic-poc/img/single.png new file mode 100644 index 0000000..47dfd2a Binary files /dev/null and b/zhetic-poc/img/single.png differ diff --git a/zhetic-poc/img/spyxfamily_cover.jpg b/zhetic-poc/img/spyxfamily_cover.jpg new file mode 100644 index 0000000..e2e5158 Binary files /dev/null and b/zhetic-poc/img/spyxfamily_cover.jpg differ diff --git a/zhetic-poc/img/width.png b/zhetic-poc/img/width.png new file mode 100644 index 0000000..d07a9a1 Binary files /dev/null and b/zhetic-poc/img/width.png differ diff --git a/zhetic-poc/index.html b/zhetic-poc/index.html new file mode 100644 index 0000000..649f967 --- /dev/null +++ b/zhetic-poc/index.html @@ -0,0 +1,29 @@ + + + /a/ manga thing + + + + +
+ +

/a/ manga thing

+ | Home + | Manga + | Contributing + | Contact | +
+
+

This service requires an IPFS client

+
+

+      + This service is 99% distributed. This means you should start seeding before you start reading and accessing the content. Install an ipfs client and connect through the http gateway it provides for you. This website is just a list of files hosted on a distributed network, a tracker, if you will. For the best possible experience we also recommend that you install the ipfs-companion browser plugin. This does not mean you should rely on the public gateway, because this site would not be able to stay up.
+      + You have the option of either a GUI client or an assortment of other CLI-based tools. Once you have the service running in the background it will translate the content and allow you to view it in your browser.
+      + Make sure to pin your favorite manga to make sure that it sticks around. This tells ipfs to always keep a local copy and help out with content distribution.
+

+ + + diff --git a/zhetic-poc/js/reader.js b/zhetic-poc/js/reader.js new file mode 100644 index 0000000..1d41be5 --- /dev/null +++ b/zhetic-poc/js/reader.js @@ -0,0 +1,174 @@ +$(document).ready(function () { + + var layoutCurrent; + var pageNo; + var pageCurrent = 1; + var title; + var cid; + var fitCurrent; + + function loadPage() { + console.log(layoutCurrent); + for(let i = 1; i <= pageNo; i++){ + $(`#image${i}`).hide(); + } + if(layoutCurrent == "double"){ + if(pageCurrent%2==0){ + pageCurrent--; + } + let pagePair = pageCurrent+1; + $(`#image${pagePair}`).show(); + } + $("#pageCounter").html(`${pageCurrent}/${pageNo}`); + $(`#image${pageCurrent}`).show(); + } + + 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"; + for (let i = 1; i <= pageNo; i++) { + $(`#image${i}`).attr("class", "imageView"); + } + $("#layoutIcon").attr("src", "img/single.png"); + fitHeight(); + loadPage(); + } + + function layoutDouble(){ + layoutCurrent = "double"; + for (let i = 1; i <= pageNo; i++) { + let side = "Right"; + if(i%2==0){ + side = "Left"; + } + $(`#image${i}`).attr("class", `image${side}`); + } + $("#layoutIcon").attr("src", "img/double.png"); + fitWidth(); + loadPage(); + } + + function fitWidth(){ + if(layoutCurrent == "single"){ + fitCurrent = "width"; + $(".imageView").css("height", "auto"); + $(".imageView").css("width", "100%"); + $("#fitIcon").attr("src", "img/width.png"); + loadPage(); + } + } + + function fitHeight(){ + if(layoutCurrent == "single"){ + fitCurrent = "height"; + $(".imageView").css("width", "auto"); + $(".imageView").css("height", "100%"); + $("#fitIcon").attr("src", "img/height.png"); + loadPage(); + } + } + + let url = new URL(window.location.href); + let id = url.searchParams.get("id"); + $.ajax({ + dataType: "json", + url: "https://amangathing.ddns.net/db.json", + headers: { "Accept": "application/json"}, + success: function (res) { + pageNo = res[id]["pageNo"]; + title = res[id]["title"]; + cid = res[id]["cid"]; + $("#pageCounter").html(`${pageCurrent}/${pageNo}`); + $("#titlebarText").html(`${title}`); + $("title").html(`${title}`); + for (let i = 1; i <= pageNo; i++) { + $("#pageView").append(``); + $(`#image${i}`).hide(); + } + loadPage(); + } + }); + + fitHeight(); + layoutSingle(); + loadPage(); + + $(document).keydown(function (e) { + switch (e.keyCode) { + case 39: + case 76: + previousPage(); + break; + case 37: + case 72: + nextPage(); + break; + default: return; + } + e.preventDefault(); + }); + $("#pageLeft").mousedown(function (e) { + nextPage(); + }); + $("#pageRight").mousedown(function (e) { + previousPage(); + }); + $("#downloadButton").click(function (e) { + //$("#downloadButton").css("background-color", "rgb(0, 0, 0, 0.2)"); + }); + $("#layoutButton").click(function (e) { + if(layoutCurrent == "single"){ + layoutDouble(); + } + else{ + layoutSingle(); + } + }); + $("#fitButton").click(function (e) { + if(fitCurrent == "height"){ + fitWidth(); + } + else{ + fitHeight(); + } + + }); + + $("#titlebar").hide(); + $("#titlebarContainer").mouseenter(function () { + console.log("mouse enter"); + $("#titlebar").fadeIn(); + }); + $("#titlebarContainer").mouseleave(function () { + console.log("mouse leave"); + $("#titlebar").fadeOut(); + }); +}); + diff --git a/zhetic-poc/manga.html b/zhetic-poc/manga.html new file mode 100644 index 0000000..cafcc78 --- /dev/null +++ b/zhetic-poc/manga.html @@ -0,0 +1,70 @@ + + + /a/ manga thing + + + + +
+ +

/a/ manga thing

+ | Home + | Manga + | Contributing + | Contact | +
+
+

This service requires an IPFS client

+
+

+      + This part could be js driven and pull the metadata from some kind of database, alternatively from ipfs through the public gateway at ipfs.io. The manga pages would be pulled from localhost and displayed in a built-in manga reader.

+
+ +
+ + + + + + + + + + + + + +
+ + +

Boku no Kokoro no Yabai Yatsu

+

Scanlation: idgaf

+

Status: ongoing

+

Chapters: x

+

Last update: recently

+

Link: + QmeKZdHoERmKUekcRxb3ao4ZuLDcF9qNbjYr3ZmeKAjC2s

+
+ + +

Otoyomegatari

+

Scanlation: idgaf

+

Status: ongoing

+

Chapters: x

+

Last update: recently

+

Link: + QmbciPyqhjrbkrJVAkWFaUMSS9BXS7MH34ibhErnzzKEtN

+
+ + +

Spy x Family

+

Scanlation: idgaf

+

Status: ongoing

+

Chapters: x

+

Last update: recently

+

Link: + QmQvdWNqGU8q5c2DyqwxhVfYZt8Cw8PFxAQD6zHfR49ojc

+
+ + diff --git a/zhetic-poc/reader.html b/zhetic-poc/reader.html new file mode 100644 index 0000000..4085c10 --- /dev/null +++ b/zhetic-poc/reader.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + +
+
+ + + + + +
+
+ +
+ + +
+ + + +