zhetic
4 years ago
parent
23ee9b620e
commit
51608c2201
@ -0,0 +1,21 @@ |
||||
<html> |
||||
<head> |
||||
<title>/a/ manga thing</title> |
||||
<meta charset="UTF-8"> |
||||
<link rel="stylesheet" href="css/stylesheet.css"> |
||||
</head> |
||||
<body> |
||||
<center> |
||||
<img src="img/out.png"/> |
||||
<h1>/a/ manga thing</h1> |
||||
| <a href="index.html">Home</a> |
||||
| <a href="manga.html">Manga</a> |
||||
| <a href="contributing.html">Contributing</a> |
||||
| <a href="contact.html">Contact</a> | |
||||
</center> |
||||
<p> |
||||
     |
||||
The project lives on irc.rizon.net#a-manga-thing |
||||
</p> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,22 @@ |
||||
<html> |
||||
<head> |
||||
<title>/a/ manga thing</title> |
||||
<meta charset="UTF-8"> |
||||
<link rel="stylesheet" href="css/stylesheet.css"> |
||||
</head> |
||||
<body> |
||||
<center> |
||||
<img src="img/out.png"/> |
||||
<h1>/a/ manga thing</h1> |
||||
| <a href="index.html">Home</a> |
||||
| <a href="manga.html">Manga</a> |
||||
| <a href="contributing.html">Contributing</a> |
||||
| <a href="contact.html">Contact</a> | |
||||
</center> |
||||
<p> |
||||
     |
||||
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 <a href="https://localhost:5001/webui">port 5001</a> 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. |
||||
</p> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -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%); |
||||
} |
||||
@ -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; |
||||
} |
||||
@ -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" } |
||||
] |
||||
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 185 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,29 @@ |
||||
<html> |
||||
<head> |
||||
<title>/a/ manga thing</title> |
||||
<meta charset="UTF-8"> |
||||
<link rel="stylesheet" href="css/stylesheet.css"> |
||||
</head> |
||||
<body> |
||||
<center> |
||||
<img src="img/out.png"/> |
||||
<h1>/a/ manga thing</h1> |
||||
| <a href="index.html">Home</a> |
||||
| <a href="manga.html">Manga</a> |
||||
| <a href="contributing.html">Contributing</a> |
||||
| <a href="contact.html">Contact</a> | |
||||
</center> |
||||
<center> |
||||
<h2 style="color:#FF0000">This service requires an IPFS client</h2> |
||||
</center> |
||||
<p> |
||||
     |
||||
<b>This service is 99% distributed.</b> 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. <br> |
||||
     |
||||
You have the option of either a <a href="https://github.com/ipfs-shipyard/ipfs-desktop">GUI client</a> or an assortment of other <a href="https://ipfs.io/ipns/dist.ipfs.io/">CLI-based tools</a>. Once you have the service running in the background it will translate the content and allow you to view it in your browser. <br> |
||||
     |
||||
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. <br> |
||||
</p> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -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(`<img draggable="false" class="imageView" id="image${i}" src="http://${cid}.ipfs.localhost:8080/${i}.jpg">`); |
||||
$(`#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(); |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,70 @@ |
||||
<html> |
||||
<head> |
||||
<title>/a/ manga thing</title> |
||||
<meta charset="UTF-8"> |
||||
<link rel="stylesheet" href="css/stylesheet.css"> |
||||
</head> |
||||
<body> |
||||
<center> |
||||
<img src="img/out.png"/> |
||||
<h1>/a/ manga thing</h1> |
||||
| <a href="index.html">Home</a> |
||||
| <a href="manga.html">Manga</a> |
||||
| <a href="contributing.html">Contributing</a> |
||||
| <a href="contact.html">Contact</a> | |
||||
</center> |
||||
<center> |
||||
<h2 style="color:#FF0000">This service requires an IPFS client</h2> |
||||
</center> |
||||
<p> |
||||
     |
||||
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.</p> |
||||
<center> |
||||
<input id="search" type="text" placeholder="Search"> |
||||
</center> |
||||
<table> |
||||
<tr> |
||||
<td class="cover"> |
||||
<img class="thumbnail" src="img/bokuyaba_cover.jpg"/> |
||||
</td> |
||||
<td class="description"> |
||||
<p><b>Boku no Kokoro no Yabai Yatsu</b></p> |
||||
<p>Scanlation: idgaf</p> |
||||
<p>Status: ongoing</p> |
||||
<p>Chapters: x</p> |
||||
<p>Last update: recently</p> |
||||
<p>Link: |
||||
<a href="https://amangathing.ddns.net/reader.html?id=0">QmeKZdHoERmKUekcRxb3ao4ZuLDcF9qNbjYr3ZmeKAjC2s</a></p> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="cover"> |
||||
<img class="thumbnail" src="img/otoyomegatari_cover.jpg"/> |
||||
</td> |
||||
<td class="description"> |
||||
<p><b>Otoyomegatari</b></p> |
||||
<p>Scanlation: idgaf</p> |
||||
<p>Status: ongoing</p> |
||||
<p>Chapters: x</p> |
||||
<p>Last update: recently</p> |
||||
<p>Link: |
||||
<a href="https://amangathing.ddns.net/reader.html?id=1">QmbciPyqhjrbkrJVAkWFaUMSS9BXS7MH34ibhErnzzKEtN</a></p> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="cover"> |
||||
<img class="thumbnail" src="img/spyxfamily_cover.jpg"/> |
||||
</td> |
||||
<td class="description"> |
||||
<p><b>Spy x Family</b></p> |
||||
<p>Scanlation: idgaf</p> |
||||
<p>Status: ongoing</p> |
||||
<p>Chapters: x</p> |
||||
<p>Last update: recently</p> |
||||
<p>Link: |
||||
<a href="https://amangathing.ddns.net/reader.html?id=2">QmQvdWNqGU8q5c2DyqwxhVfYZt8Cw8PFxAQD6zHfR49ojc</a></p> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,42 @@ |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title></title> |
||||
|
||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/> |
||||
|
||||
<link rel="stylesheet" href="css/reader.css"></link> |
||||
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> |
||||
<script src="js/reader.js"></script> |
||||
</head> |
||||
<body> |
||||
|
||||
<div id="titlebarContainer"> |
||||
<div id="titlebar"> |
||||
<button class="titlebarButton" style="float:left" onclick="history.back()"> |
||||
<img class="titlebarIcon" src="img/back.png"/> |
||||
</button> |
||||
<span id="titlebarText"></span> |
||||
<button class="titlebarButton" id="downloadButton"> |
||||
<img class="titlebarIcon" id="downloadIcon" src="img/download.png"/> |
||||
</button> |
||||
<button class="titlebarButton" id="layoutButton"> |
||||
<img class="titlebarIcon" id="layoutIcon" src="img/single.png"/> |
||||
</button> |
||||
<button class="titlebarButton" id="fitButton"> |
||||
<img class="titlebarIcon" id="fitIcon" src="img/height.png"/> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="pageLeft"></div> |
||||
<div id="pageRight"></div> |
||||
|
||||
<div id="pageView"></div> |
||||
|
||||
<div id="pageFooter"> |
||||
<span id="pageCounter">0/?</span> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue