archive/comic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a proper viewer

Browse source
This commit is contained in:
biglyderv 2024-08-31 20:07:40 -04:00
parent ee4fbcf951
commit c16a4eba11
No known key found for this signature in database
GPG key ID: 33AC87E9ACE66954
4 changed files with 45 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
0.svg → comics/0.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 191 KiB

After

Width:  |  Height:  |  Size: 191 KiB

25
index.css Normal file
View file

@ -0,0 +1,25 @@
.ui {
display: inline-block;
margin: 10px;
text-decoration: none;
font-size: 1.2rem;
background: rgb(130, 130, 130);
border: solid rgb(100, 100, 100) 2px;
padding: 10px;
font-weight: bold;
color: rgb(255,255,255);
border-radius: 10px;
}
.ui-right {
float: right;
}
img.art {
display: block;
margin: auto;
border: none;
border-radius: 0;
width: 500px;
max-width: 80vw;
}

15
index.html
View file

@ -1,8 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<!-- You may want to copy this file manually... -->
<link rel="stylesheet" href="https://onezderv.codeberg.page/home/index.css">
<link rel='stylesheet' href='index.css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>See <a href='https://codeberg.org/onezDerv/comic'>comics</a></p>
<section id='main'>
<h1>Onez's Comics</h1>
<img src='comics/0.svg' class='art comic'>
<a href='#' class='ui ui-left'>Previous</a>
<a href='#' class='ui ui-right'>Next</a>
<a href='https://codeberg.org/onezDerv/home' class='ui'>Source</a>
<a href='https://zenoverse.net/' class='ui'>More</a>
</section>
<script src='index.js'></script>
</body>
</html>

6
index.js Normal file
View file

@ -0,0 +1,6 @@
let params = new URLSearchParams(window.location.search);
let comicPage = params.get('id') || 0;
document.querySelector('.comic').src = `comics/${comicPage}.svg`;
document.querySelector('.ui-left').href = `?id=${comicPage * 1 - 1}`;
document.querySelector('.ui-right').href = `?id=${comicPage * 1 + 1}`;