init

8 months ago · d520884156
parent 4f01225945
commit d520884156
46 changed files with 896 additions and 0 deletions
--- a/about.html
+++ b/about.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ruth and Dianne are Starting a Band | About</title>
+
+    <!-- style -->
+    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
+
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <!-- Cherry Cream Soda -->
+    <link href="https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&display=swap" rel="stylesheet">
+    <!-- Open Sans -->
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- header -->
+    <div class="writeHeader"></div>
+
+    <div class="subPage clearfix">
+        <h1>About</h1>
+        <p>This is an example of how to use the <strong>Rarebit template.</strong> It uses a public domain comic strip called <strong>Teena</strong> that ran in newspapers from 1944 to 1963.</p> 
+        
+        <img src="img/hildaterry.png" alt="Hilda Terry" class="clearfix leftPic"/>
+
+        <div id="authorBlurb">
+            <p>The author, <strong>Hilda Terry</strong>, became the first woman allowed to join the National Cartoonists Society, upon which she lobbied for other women cartoonists to join, such as <strong>Mopsy</strong> author <strong>Gladys Parker.</strong></p> 
+            <p>She also held a firm belief that she was a reincarnation of <strong>Dorcas Good</strong>, a child imprisoned after being accused of practicing witchcraft in the 1692 Salem witch trials.</p>
+            <p>Say what you will, but the lady's got range!</p>
+        </div>
+    </div>
+    
+    <!-- footer -->
+    <div class="writeFooter"></div>
+
+<!-- at the end of this page we only call the header and footer scripts, because we don't need use any functions from the other scripts. -->
+<script src="js/comic_header.js" defer></script>
+<script src="js/comic_footer.js" defer></script>
+</body>
+</html>
--- a/archive.html
+++ b/archive.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
+    <title>WebComic | Archive</title>
+
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <!-- Cherry Cream Soda -->
+    <link href="https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- header -->
+    <div class="writeHeader"></div>
+
+
+    <div class="archivePage subPage" align="center">
+        
+        <h1>Archive</h1>
+        <script>
+        indexPage = "index.html" //set which html page your comics are on, supremely important. archive system will break otherwise
+        </script>
+
+        <div class="chrono">
+            <h2>Chronological Order</h2>
+        </div>
+
+        <div class="lastfirst">
+            <h2>"Latest First" Order</h2>
+        </div>
+
+        <div class="chapter1">
+            <h2>Or, divide it into chapters/arcs</h2>
+            <h2>(You can also turn off thumbnails)</h2>
+            <h2>Chapter 1</h2>
+        </div>
+
+        <div class="chapter2">
+            <h2>Chapter 2</h2>
+        </div>
+
+        <div class="chapter3">
+            <h2>Chapter 3</h2>
+        </div>
+
+        <div class="chapter4">
+            <h2>Chapter 4</h2>
+        </div>
+    </div>
+    
+    <!-- footer-->
+    <div class="writeFooter"></div>
+
+<!-- really important- every js script is called here, be sure to always put them just before the closing body tag, use a defer attribute, and call them in this specific order.-->
+<script src="js/comic_header.js" defer></script>
+<script src="js/comic_settings.js" defer></script>
+<script src="js/comic_archive.js" defer></script>
+<script src="js/comic_footer.js" defer></script>
+</body>
+</html>
--- a/characters.html
+++ b/characters.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebComic | Characters</title>
+
+    <!-- style -->
+    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
+
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <!-- Cherry Cream Soda -->
+    <link href="https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&display=swap" rel="stylesheet">
+    <!-- Open Sans -->
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+</head>
+<body align="center">
+
+    <!-- header -->
+    <div class="writeHeader"></div>
+
+    <!-- this character page kind of sucks, its more of an example of the kinds of supplementary pages you can potentially add-->
+    
+    <div class="subPage clearfix" align="center">
+        <h1>Characters</h1>
+        <p>All of these sub pages are just supposed to be examples of what you could do, you're definitely encouraged to mess around with them and come up with something better</p>
+            <table class="charTable">
+                <!-- teena -->
+                <tr>
+                    <td>
+                    <img src="img/characters/teena.png" alt="Teena Merry" class="clearfix rightPic"/>
+                    <h2>Teena Merry</h2>
+                    <p>She's just your average everyday teenage girl! Reading magazines, chasing boys, you know! girl stuff!</p>
+                    </td>
+                </tr>
+                <!-- pipsie -->
+                <tr>
+                    <td>
+                    <img src="img/characters/pipsie.png" alt="Pipsie Squeakie" class="clearfix rightPic"/>
+                    <h2>Pipsie Squeakie</h2>
+                    <p>Teena's partner in crime! She has short black hair also which is cool</p>
+                    </td>
+                </tr>
+                <!-- gwendolyn -->
+                <tr>
+                    <td>
+                    <img src="img/characters/gwendolyn.png" alt="Gwendolyn" class="clearfix rightPic"/>
+                    <h2>Gwendolyn</h2>
+                    <p>A precocious, smart mouthed little girl from across the street that Teena and Pipsie like to hang out with. Teena's way into her older brother.</p>
+                    </td>
+                </tr>
+                <!-- majima -->
+                <tr>
+                    <td>
+                    <img src="img/characters/majima.png" alt="Goro Majima" class="clearfix rightPic"/>
+                    <h2>Goro Majima</h2>
+                    <p>After losing his eye and the trust of his sworn brother in a botched assassination, Majima clawed his way out of debt and through the ranks of the Yakuza to become Captain of the Shimano Family, where his ferocity and unpredictability in battle earned him the title "The Mad Dog of Shimano". He's now the patriarch of the Majima Family, a direct subsidiary of the Tojo Clan.</p>
+                    </td>
+                </tr>
+            </table>
+    </div>
+
+    <!-- footer -->
+    <div class="writeFooter"></div>
+
+<!-- at the end of this page we only call the header and footer scripts, because we don't need use any functions from the other scripts. -->
+<script src="js/comic_header.js" defer></script>
+<script src="js/comic_footer.js" defer></script>
+</body>
+
+</html>
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,206 @@
+/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
+  HTML content. To learn how to do something, just try searching Google for questions like
+   "how to change link color." */
+
+
+body, div, main, section, article {
+  box-sizing: border-box; 
+}
+
+/* universal background color */
+body {
+  background-color: #DA5437; 
+}
+
+/* header image */
+header img {
+  width: 500px;
+  max-width: 98%;
+}
+
+/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+/*FONTS*/
+
+/* header font */
+#showComic, header, h1, h2, h3, h4, h5 {
+  font-family: 'Cherry Cream Soda', cursive;
+}
+
+/* body font */
+.subPage p, footer, #authorNotes, .archiveTable {
+  font-family: 'Open Sans', sans-serif;
+  font-size: large;
+}
+
+/* STYLING FOR SUBPAGES (about, characters, etc) */
+
+/*general*/
+
+.subPage {
+  width: 1000px;
+  max-width: 98%;
+  background-color: #ffffff;
+  outline: 3px solid #000000;
+  margin: auto;
+  margin-bottom: 10px;
+  padding: 0px 12px 12px;
+}
+
+.subPage:not(.archivePage) {
+  text-align: center;
+}
+
+/* for pictures displayed to the left */
+.leftPic {
+  clear: left;
+  float:right;
+  margin-left:20px;
+}
+
+/* for pictures displayed to the left */
+.rightPic {
+  clear: right;
+  float:left;
+  margin-left:20px;
+}
+
+/* specific to Characters */
+.charTable, .charTable td { 
+  width: 100%;
+}
+
+/* link colors */
+a {
+      color: #000000;
+    }
+
+a:hover {
+      color: #DA5437;
+    }
+
+/* HEADER */
+header #nav {
+  background-color: #ffffff;
+  outline: 3px solid #000000;
+  font-size: 20px;
+  width: 98%;
+  margin: auto;
+}
+
+/* HOMEPAGE */
+
+/* style nav button images */
+.comicNav {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0px;
+}
+.comicNav img {
+  width: 80px;
+  max-width: 98%;
+  padding-right: 30px;
+}
+
+/* style comic page image */
+.comicPage img {
+  width: 900px;
+  max-width: 98%;
+}
+
+/* style author notes */
+#authorNotes {
+  background-color:#ffffff;
+  outline: 3px solid #000000;
+  margin: auto;
+  padding: 3px;
+  padding-top: 0px;
+  width: 900px;
+  max-width: 98%;
+}
+
+/* ARCHIVE PAGE */
+
+/* style table in which archive is displayed */
+.archiveTable {
+  width: 90%;
+  border-collapse:collapse;
+}
+
+/* style archive table cells */
+.archiveTable td {
+  padding: 3px;
+  vertical-align: center;
+  
+}
+
+/* style table cell in which page title is displayed */
+.archiveCellTitle:not(.leftAlignTableText) {
+  max-width: 300px;
+  text-align: center;
+}
+
+.archiveCellDate {
+  text-align: right;
+  min-width: 120px;
+}
+
+.archiveCellNum {
+  text-align: center;
+  min-width: 30px;
+}
+
+/* style the thumbnails on the archive page */
+.archiveCellThumb {
+    width: 500px;
+    max-width: 60px;
+}
+.archiveCellThumb img{
+    max-width: 100%;
+  }
+
+/* for left aligning the text in a table cell */
+.leftAlignTableText td {
+  text-align: left;
+}
+
+/* highlight a table row and make pointer into hand when moused over */
+.archiveRow:hover {
+  background-color: #DA5437;
+  cursor: pointer;
+}
+
+/* FOOTER */
+footer {
+  color: #421a1a;
+  margin-top: 12px;
+  margin-bottom: 15px;
+  float: left;
+  width: 100%;
+  font-size: 12px;
+}
+
+footer p {
+  margin: auto;
+}
+
+footer a {
+  color: #c8d32b
+}
+
+footer a:hover {
+  color: #868d26
+}
+
+/* take away margins from the edges of the screen */
+html, body {
+  margin: 0;
+}
+
--- a/img/characters/gwendolyn.png
+++ b/img/characters/gwendolyn.png
--- a/img/characters/majima.png
+++ b/img/characters/majima.png
--- a/img/characters/pipsie.png
+++ b/img/characters/pipsie.png
--- a/img/characters/teena.png
+++ b/img/characters/teena.png
--- a/img/comicnav/comicnav.clip
+++ b/img/comicnav/comicnav.clip
--- a/img/comicnav/nav_first.png
+++ b/img/comicnav/nav_first.png
--- a/img/comicnav/nav_last.png
+++ b/img/comicnav/nav_last.png
--- a/img/comicnav/nav_next.png
+++ b/img/comicnav/nav_next.png
--- a/img/comicnav/nav_previous.png
+++ b/img/comicnav/nav_previous.png
--- a/img/comics/pg1.jpg
+++ b/img/comics/pg1.jpg
--- a/img/comics/pg10.jpg
+++ b/img/comics/pg10.jpg
--- a/img/comics/pg11.jpg
+++ b/img/comics/pg11.jpg
--- a/img/comics/pg12.jpg
+++ b/img/comics/pg12.jpg
--- a/img/comics/pg13.jpg
+++ b/img/comics/pg13.jpg
--- a/img/comics/pg14.jpg
+++ b/img/comics/pg14.jpg
--- a/img/comics/pg2_1.jpg
+++ b/img/comics/pg2_1.jpg
--- a/img/comics/pg2_2.jpg
+++ b/img/comics/pg2_2.jpg
--- a/img/comics/pg3.jpg
+++ b/img/comics/pg3.jpg
--- a/img/comics/pg4.jpg
+++ b/img/comics/pg4.jpg
--- a/img/comics/pg5.jpg
+++ b/img/comics/pg5.jpg
--- a/img/comics/pg6.jpg
+++ b/img/comics/pg6.jpg
--- a/img/comics/pg7.jpg
+++ b/img/comics/pg7.jpg
--- a/img/comics/pg8.jpg
+++ b/img/comics/pg8.jpg
--- a/img/comics/pg9.jpg
+++ b/img/comics/pg9.jpg
--- a/img/hildaterry.png
+++ b/img/hildaterry.png
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/rarebitlogo_small.png
+++ b/img/rarebitlogo_small.png
--- a/img/thumbs/default.png
+++ b/img/thumbs/default.png
--- a/img/thumbs/pg1.png
+++ b/img/thumbs/pg1.png
--- a/img/thumbs/pg2.png
+++ b/img/thumbs/pg2.png
--- a/img/thumbs/pg3.png
+++ b/img/thumbs/pg3.png
--- a/img/thumbs/pg4.png
+++ b/img/thumbs/pg4.png
--- a/img/thumbs/pg5.png
+++ b/img/thumbs/pg5.png
--- a/img/thumbs/pg6.png
+++ b/img/thumbs/pg6.png
--- a/img/thumbs/pg7.png
+++ b/img/thumbs/pg7.png
--- a/img/thumbs/pg8.png
+++ b/img/thumbs/pg8.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,49 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>Commited Lines</title>
+    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <!-- Cherry Cream Soda -->
+    <link href="https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&display=swap" rel="stylesheet">
+  </head>
+  <body>
+
+  <!-- most of the elements on these pages are defined in the js files as functions, then we tell these functions where to show up on the page by placing empty divs and naming those divs the name of the js functions. check the js files to edit these elements in more detail.-->
+
+  <div align="center">
+    <!-- header that has the logo image and top page navigation. don't forget to put this on every page -->
+    <div class="writeHeader"></div>
+
+    <!-- make sure that if you want to turn on automatically scrolling to the top of the comic when you load a new page, keep the id of this div and the variable "navScrollTo" in showcomic.js the same-->
+    <div id="showComic">
+
+      <!-- write the title of the page. -->
+      <div class="writePageTitle"></div>
+      <!-- write top navigation -->
+      <div class="writeNav"></div>
+      <!-- write the current page of your comic -->
+      <div class="writePageClickable"></div>
+      <!-- write bottom navigation -->
+      <div class="writeNav"></div>
+      
+    </div>
+  </div>
+  <div id="authorNotes">
+    <h2>Author Notes</h2>
+    <!-- write the author notes for the current page-->
+    <div class="writeAuthorNotes"></div>
+  </div>
+
+<!-- footer that has a link back to rarebit, and ideally has copyright info and stuff. again, don't forget to put this on every page-->
+<div class="writeFooter"></div>
+
+  <!-- really important- every js script is called here, be sure to always put them just before the closing body tag, use a defer attribute, and call them in this specific order.-->
+    <script src="js/comic_settings.js" defer></script>
+    <script src="js/comic_show.js" defer></script>
+    <script src="js/comic_header.js" defer></script>
+    <script src="js/comic_footer.js" defer></script>
+  </body>
+</html>
--- a/js/comic_archive.js
+++ b/js/comic_archive.js
@ -0,0 +1,103 @@
+//comic_archive.js was created by geno7
+
+//Writing sections of the archive page involves 2 steps:
+//first, use the writeArchive function in this .js file. set the parameters (the stuff inside the parenthesis, comma separated) to toggle options.
+//then, to place that section of the archive on the html page, you'd make a div, and give that div a class name of whatever you've called that section of the archive in the first parameter.
+//if you put anything in that div, the list of comics will get appended after it. i.e. you can put the title of that specific section as a header in that div. 
+
+writeArchive(
+    "chrono", //class of the div that you want this section of the archive to appear in. to have it be on your html page, make an empty div with this class.
+    1, //earliest page to list
+    maxpg, //latest page to list. setting to maxpg will make it automatically update with the latest page
+    -1, //if set to 0, list is displayed "latest first". if set to -1, list is displayed chronologically
+    true, //if set to true, each comic will have its own thumbnail image next to it. if a comic doesn't have its own thumbnail, it'll be set to the default thumbnail.
+    true //if set to true, each comic will have a display number
+);
+
+writeArchive("lastfirst", 1, maxpg, 0, true,true);
+
+writeArchive("chapter1",1,3,-1,false,true) //writeArchive is for listing a RANGE of pages, take advantage of this by using headers to divide them into chapters or by month
+
+writeArchive("chapter2", 4, 9, -1, false,false);
+
+writeArchive("chapter3", 9, 12, -1, false,false);
+
+writeArchive("chapter4", 13, 15, -1, false,false);
+
+//below this point is stuff you don't really need to pay attention to if you're not super familiar with JS 
+
+function writeArchive(divClass, min, max, reverseOrder, useThumbs,useNums) {
+    //create a table to put the archive data
+    let archiveTable = document.createElement("TABLE");
+    archiveTable.setAttribute("class", "archiveTable"); //set class to archiveTable for css styling
+    let getDiv = document.getElementsByClassName(divClass)[0]; //get div class
+    getDiv.appendChild(archiveTable);
+    //make the table from the currently available comics
+    for (i = min; i <= max; i++) {
+        let row = archiveTable.insertRow(reverseOrder); //if reverseOrder is set to 0 it'll reverse the order, otherwise it'll display it in regular order
+
+        //insert table cells
+        let cellThumb = useThumbs ? row.insertCell() : 0; //only insert thumbs and number rows if useThumbs and useNums are toggled respectively
+        let cellNum = useNums ? row.insertCell() : 0;
+
+        let cellTitle = row.insertCell();
+        let cellDate = row.insertCell();
+
+        //default values when you don't have page data set
+        let pgTitle = "Page " + i;
+        let pgDate = "";
+        let pgNum = "";
+
+        //url of thumbnail
+        let pgThumb = thumbFolder + "/" + image + i + "." + thumbExt;
+        //url of default thumbnail
+        let pgThumbDefault = thumbFolder + "/" + thumbDefault + "." + thumbExt;
+
+        if (pgData.length >= i) {
+            //set values to the values indicated in the pgData object if available
+            if (pgData[i - 1].title) {
+                pgTitle = pgData[i - 1].title;
+            }
+            if (pgData[i - 1].date) {
+                pgDate = pgData[i - 1].date;
+            }
+            if (pgData[i - 1].date) {
+                pgDate = pgData[i - 1].date;
+            }
+            if (pgData[i - 1].pgNum) {
+                pgNum = pgData[i - 1].pgNum;
+            }
+        }
+
+        //make the whole row a clickable link to the corresponding comic
+        row.setAttribute("class", `archiveRow`);
+
+        let linkToComic = `${indexPage}?pg=${i + navScrollTo}`;
+
+        row.addEventListener("click", () => {
+            window.location.href = linkToComic;
+        });
+
+        if (useThumbs) {
+            //draw thumbnails if you have thumbnails toggled
+            cellThumb.innerHTML = `<img alt="${pgTitle}" title="${pgTitle}" src="${pgThumb}" onerror="javascript:this.src='${pgThumbDefault}'"/>`;
+            cellThumb.setAttribute("class", "archiveCellThumb");
+        }
+
+        if (useNums) {
+            //same for numbers
+            cellNum.innerHTML = `<span><strong>${pgNum}</strong></span>`;
+            cellNum.setAttribute("class", "archiveCellNum");
+        }
+
+        //draw each row
+        cellTitle.innerHTML = `<span><strong>${pgTitle}</strong></span>`;
+        cellTitle.setAttribute("class", "archiveCellTitle");
+        cellDate.innerHTML = "<span> " + pgDate + " </span>";
+        cellDate.setAttribute("class", "archiveCellDate");
+        console.log(i + `created row - ${pgTitle} - ${linkToComic}`);
+
+        //left align text if not using thumbnails
+        cellTitle.className += " leftAlignTableText";
+    }
+}
--- a/js/comic_footer.js
+++ b/js/comic_footer.js
@ -0,0 +1,10 @@
+//the footer of the site would be handled in this javascript file, so you don't have to copypaste the whole thing onto every page.
+//at the bottom of your page, but before the js script calls and the closing body tag, put an empty div with a class of "writeFooter"
+document.querySelector(".writeFooter").innerHTML = `
+    <footer align="center">
+        <p>Here's a footer where you can put copyright information and stuff.</p>
+        <p>There's also a link back to Rarebit. It's ultimately your choice whether to delete it or not but it'd be cool of you to keep it there and spread the word...</p> 
+        <p><strong>Powered by</strong></p>
+        <a href="https://rarebit.neocities.org"><img src="img/rarebitlogo_small.png" height = "30" /></a>
+    </footer>
+`;
--- a/js/comic_header.js
+++ b/js/comic_header.js
@ -0,0 +1,14 @@
+//the header of the site would be handled in this javascript file, so you don't have to copypaste the whole thing onto every page.
+//at the bottom of your page, but before the js script calls and the closing body tag, put an empty div with a class of "writeHeader"
+document.querySelector(".writeHeader").innerHTML = `
+    <header align="center">
+        <a href="index.html"><img src="./img/logo.png" alt="" /></a> 
+
+        <div id="nav">
+            <a href="index.html">HOME</a> |
+            <a href="archive.html">ARCHIVE</a> |
+            <a href="about.html">ABOUT</a> |
+            <a href="characters.html">CHARACTERS</a>
+        </div>
+    </header>
+`;
--- a/js/comic_settings.js
+++ b/js/comic_settings.js
@ -0,0 +1,133 @@
+//comic_settings.js was created by geno7, with much needed assistance from Dannarchy
+
+//this is the main file you'll be messing with to manage and update your comic. most (not all) of the main toggle-able settings are here.
+
+//comic_archive has more settings pertaining to the archive page, and comic_show has settings pertaining to the main place that pages of your comic are displayed.
+
+let pg = Number(findGetParameter("pg")); //make "pg" mean the current page number (this line doesnt work unless I put it here, if you're inexperienced with js dont worry about it)
+
+////////////////////////
+//VARIABLES FOR TWEAKING
+////////////////////////
+
+//REALLY IMPORTANT ONES
+const maxpg = 14; //the current number of pages your comic has in total. this DOESNT necessarily mean number of IMAGE FILES as it doesn't count pages split into multiple files. 
+//YOU MUST UPDATE THIS NUMBER EVERY TIME YOU ADD A NEW PAGE or else it wont display the most recent page
+
+// COMIC PAGE SETTINGS
+const folder = "img/comics"; //directory of the folder where you keep all the comics
+const image = "pg"; //what you'll name all your comic pages
+const imgPart = "_" //special character(s) you put after the page number to subdivide pages into multiple image files (ie pg2_1, pg2_2, etc)
+const ext = "jpg"; //file extension of your comic pages
+
+//THUMBNAIL SETTINGS
+const thumbFolder = "img/thumbs" //directory of the folder where you keep all the thumbnail images for the comics, in case you want the archive page to use thumbnails.
+const thumbExt = "png" //file extension of thumbnails
+const thumbDefault = "default" //name of the default thumbnail that displays when no thumbnail is set, located in the directory you set thumbFolder to.
+
+//NAVIGATION SETTINGS
+const navText = ["First","Previous","Next","Last"]; //alt text for your nav images, or just the text that shows up if you're not using images
+const navFolder = "img/comicnav"; //directory where nav images are stored
+const navExt = "png" //file extension of nav images
+const navScrollTo = "#showComic"; //id of the div you want the page to automatically scroll to when you click to the next comic. will turn off if you delete text between quotation marks
+
+if (pg == 0) {pg = maxpg;} //display MOST RECENT COMIC when the webpage is loaded. if you want to instead have the FIRST COMIC displayed first, change maxpg to 1.
+
+//pgData holds all the parameters for each of your pages. copypaste this and fill out accordingly:
+/* 
+    {
+        pgNum: ,
+        title: "",
+        date: writeDate([YEAR],[MONTH],[DAY]),
+        altText: "",
+        imageFiles: "",
+        authorNotes: ``
+    },
+*/
+//Note: the formatting is important! The whole thing won't show up if you forget to include the commas or curly braces in the right place.
+
+const pgData = [
+    {
+        pgNum: 1, //what page number it is
+        title: "The First Page Title", //the title of the page (leaving this blank will default it to "Page X")
+        date: writeDate(2021, 3, 16), //the date on which the page was posted (mainly for the archive). The date is written using a function called "writeDate", basically just put writeDate and then some parenthesis and, comma separated, the year followed by the month and the day. Don't forget another comma at the end outside the parenthesis!
+        altText: "Here's some alt text!", //the alt text (mouse over text) for this particular comic. put nothing inbetween the quotes for no alt text
+        imageFiles: 1, //how many image files this page is split into
+        authorNotes: `
+            <p>If you want to write an author notes section, this'd be the place to do it.</p>
+            <p>You can even use whatever html tags you want in here to format it, the script called on your html page should spit out anything you type between these backticks.</p>
+            `,
+    },
+    {
+        pgNum: 2,
+        title: "The Second Page Title",
+        date: writeDate(2021, 3, 17),
+        altText: "Here's some more alt text!",
+        imageFiles: 2,
+        authorNotes: `
+            <p>You can have different author notes for every page.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate, orci sit amet dignissim eleifend, magna felis malesuada nunc, ut sagittis purus mi ac urna. Fusce ligula urna, varius vel sapien sit amet, vulputate tempor felis. In hac habitasse platea dictumst. Aliquam laoreet volutpat interdum. Vestibulum non libero sit amet leo accumsan porttitor. Vivamus nec porttitor neque. Sed eget mauris quam.</p>
+            `,
+    },
+    {
+        pgNum: 3,
+        title: "The Third Page Title",
+        date: writeDate(2021, 3, 18),
+        altText: "Here's even more alt text!",
+        imageFiles: 1,
+        authorNotes: `
+            <p>Sed lectus magna, dignissim eu sapien quis, euismod pulvinar diam. In odio massa, auctor blandit dolor id, varius ultricies lacus. Suspendisse sed libero vel leo dictum consectetur. In fringilla elit sit amet placerat varius. Duis vel lacus ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Proin eleifend metus eu ex elementum venenatis. Curabitur sodales, ipsum placerat ornare convallis, sem eros convallis felis, vel efficitur erat ante id diam.</p>
+            `,
+    },
+    {
+        pgNum: 4,
+        title: "Even If The Title of a Page Is Really Long, It'll Wrap",
+        date: writeDate(2021, 3, 19),
+        altText: "So much alt text...",
+        imageFiles: 1,
+        authorNotes: `
+            <p>Sed lectus magna, dignissim eu sapien quis, euismod pulvinar diam. In odio massa, auctor blandit dolor id, varius ultricies lacus. Suspendisse sed libero vel leo dictum consectetur. In fringilla elit sit amet placerat varius. Duis vel lacus ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Proin eleifend metus eu ex elementum venenatis. Curabitur sodales, ipsum placerat ornare convallis, sem eros convallis felis, vel efficitur erat ante id diam.</p>
+            `,
+    },
+    {
+        pgNum: 5,
+        title: "Also if you don't feel like coming up with a title for every page, you don't have to.",
+        date: writeDate(2021, 3, 20),
+        altText: "Here's even more alt text!",
+        imageFiles: 1,
+        authorNotes: `
+            <p>Sed lectus magna, dignissim eu sapien quis, euismod pulvinar diam. In odio massa, auctor blandit dolor id, varius ultricies lacus. Suspendisse sed libero vel leo dictum consectetur. In fringilla elit sit amet placerat varius. Duis vel lacus ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Proin eleifend metus eu ex elementum venenatis. Curabitur sodales, ipsum placerat ornare convallis, sem eros convallis felis, vel efficitur erat ante id diam.</p>
+            `,
+    },
+    {
+        pgNum: 6,
+        title: `Unnamed pages won't display a title, and they'll show up as "Page [X]" when listed in the archive`,
+        date: writeDate(2021, 3, 21),
+        altText: "Here's even more alt text!",
+        imageFiles: 1,
+        authorNotes: `
+            <p>Sed lectus magna, dignissim eu sapien quis, euismod pulvinar diam. In odio massa, auctor blandit dolor id, varius ultricies lacus. Suspendisse sed libero vel leo dictum consectetur. In fringilla elit sit amet placerat varius. Duis vel lacus ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Proin eleifend metus eu ex elementum venenatis. Curabitur sodales, ipsum placerat ornare convallis, sem eros convallis felis, vel efficitur erat ante id diam.</p>
+            `,
+    },
+];
+
+//below is a function you dont rly need to mess with but if you're more experienced with js you can
+
+function findGetParameter(parameterName) { //function used to write a parameter to append to the url, to give each comic page its own unique url
+    let result = null,
+    tmp = []; 
+    let items = location.search.substr(1).split("&");
+    for (let index = 0; index < items.length; index++) {
+        tmp = items[index].split("=");
+        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
+    }
+    return result;
+}
+
+function writeDate(year,month,day) { //write date of comic page
+    const date = new Date(year,month-1,day)
+    .toDateString() //format date as Day Month Date Year
+    .toString() //convert it to a string
+    .slice(4) //remove the Day
+    return date
+}
--- a/js/comic_show.js
+++ b/js/comic_show.js
@ -0,0 +1,202 @@
+//comic_show.js was created by geno7, with much needed assistance from Dannarchy
+
+//this is the script that actually displays the comics, nav and comic title on the page. 
+
+//below are what's called some "function calls", each one is responsible for making an element of the page. to get something to actually show up on the page, all you'd need to do is make a div with a class that has the same name as the function call. i.e. writeNav shows comic navigation, to show it on a page youd use <div class="writeNav"></div> wherever you want it to be. You can even put multiple divs with that same class name and it'll display multiple instances of the navigation.
+
+//a couple of the function calls have toggles too.
+
+
+
+writeNav(true); //show navigation for comic pages. to toggle either images or text for nav, set this to true or false.
+
+//debug
+console.log(pg)
+
+writePageTitle(".writePageTitle", true, " - "); //write title of page. true/false
+
+writePageClickable(".writePageClickable",true); //show the current page. to toggle whether pages can be clicked to move to the next one, set this to true or false.
+
+writeAuthorNotes(".writeAuthorNotes");
+
+keyNav(); //enables navigation through the comic with the arrow keys and WSAD. It doesn't need a div with a class name, it automatically works. delete or comment out (add // at the beginning) here to disable.
+
+// below this point is more under-the-hood type stuff that we only encourage messing with if you're more familiar with js, 
+// but it's still commented as extensively as possible anyway just in case
+
+//SHOW COMIC PAGE, with clickable link
+function writePageClickable(div,clickable) {
+    if (!clickable) {
+        document.querySelector(div).innerHTML = `<div class="comicPage">${writePage()}</div>`; //display comic page without link
+    } else if (pg < maxpg) {
+        //check whether comic is on the last page
+        document.querySelector(div).innerHTML = `<div class="comicPage"><a href="?pg=${pg + 1}${navScrollTo}"/>${writePage()}</a></div>`; //display comic page and make it so that clicking it will lead you to the next page
+    } else {
+        document.querySelector(div).innerHTML = `<div class="comicPage">${writePage()}</div>`; //display comic page without link
+    }
+}
+
+function writePageTitle(div,toggleNum, char) {
+  if (pgData.length >= pg) {
+    //display title of current page
+    document.querySelector(div).innerHTML = `<h1>${pgData[pg - 1].title}</h1>`;
+    if (toggleNum) {
+        //toggle whether you want to display the page number
+        document.querySelector(div).innerHTML = `<h1>${pgData[pg - 1].pgNum + char + pgData[pg - 1].title}</h1>`; //char denotes a separating character between the number and the title
+    }
+  }
+}
+
+function writeAuthorNotes(div) { //display author notes
+  if (pgData.length >= pg) {
+    return document.querySelector(div).innerHTML = `${pgData[pg-1].authorNotes}`
+  }
+}
+
+//function used to split pages into multiple images if needed, and add alt text
+function writePage() {
+  let partExtension = ""; //part extension to add to the url if the image is split into multiple parts
+  let altText = ""; //variable for alt text
+  let path = (folder != "" ? folder + "/" : "") + image + pg + partExtension + "." + ext; //path for your comics made out of variables strung together
+  let page = ``;
+
+  if (pgData.length < pg) { //if the array is blank or not long enough to have an entry for this page
+    //debug
+    console.log("page code to insert - " + page);
+    console.log("alt text to print - " + altText);
+    //
+    page = `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`;
+    return page;
+  } else if (pgData.length >= pg) { //if the array is not blank, and if its at least long enough to have an entry for the current page
+
+    altText = pgData[pg - 1].altText; //set alt text to the text defined in the array
+
+    if (pgData[pg-1].imageFiles > 1) { //if theres more than one page segment
+    for (let i = 1; i < pgData[pg-1].imageFiles+1; i++) { //for loop to put all the parts of the image on the webpage
+      partExtension = imgPart + i.toString();
+      path = (folder != "" ? folder + "/" : "") + image + pg + partExtension + "." + ext; //reinit path (there has to be a less dumb way to do this)
+      if (i > 1) {page += `<br/>`} //add line break
+      page += `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`; //add page segment
+      }
+    } else {
+      page = `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`;
+    }
+    //debug
+    console.log("page code to insert - " + page);
+    console.log("alt text to print - " + altText);
+    //
+    return page;
+  }
+}
+
+//debug
+console.log("array blank/not long enough? " + (pgData.length < pg));
+console.log("array length - " + pgData.length);
+console.log("current page - " + pg);
+console.log("number of page segments - " + pgData[pg-1].imageFiles);
+console.log("alt text - " + `"` + pgData[pg - 1].altText + `"`);
+
+console.log("nav text - " + navText);
+console.log("nav image file extension - " + navExt);
+
+function imgOrText(setImg,navTextSet) { //function that writes the indicated nav button as either an image or text
+
+  if (setImg) { //if its an image
+    return `<img src="` + navFolder + `/nav_` + navText[navTextSet].toLowerCase() + `.` + navExt + `" alt="` + navText[navTextSet] + `" />`;
+  } else {
+    return navText[navTextSet];
+  }
+}
+
+function writeNav(imageToggle) {
+    let writeNavDiv = document.querySelectorAll(".writeNav");
+    writeNavDiv.forEach(function(element) {
+      element.innerHTML = `<div class="comicNav">
+        ${firstButton()}
+        ${divider()}
+        ${prevButton()}
+        ${divider()}
+        ${nextButton()}
+        ${divider()}
+        ${lastButton()}
+        </div>
+        `;})
+
+    function firstButton() {
+        //FIRST BUTTON
+        if (pg > 1) {
+            //wait until page 2 to make button active
+            return `<a href="?pg=` + 1 + navScrollTo + `"/>` + imgOrText(imageToggle, 0) + `</a>`;
+        } else {
+            if (!imageToggle) {
+                return imgOrText(imageToggle, 0);
+            } else {
+                return ``;
+            }
+        }
+    }
+
+    function divider() {
+        //divider
+        if (!imageToggle) {
+            return ` | `;
+        }
+        return ``;
+    }
+
+    function prevButton() {
+        //PREV BUTTON
+        if (pg > 1) {
+            //wait until page 2 to make button active
+            return `<a href="?pg=` + (pg - 1) + navScrollTo + `"/>` + imgOrText(imageToggle, 1) + `</a>`;
+        } else {
+            if (!imageToggle) {
+                return imgOrText(imageToggle, 1);
+            } else {
+                return ``;
+            }
+        }
+    }
+
+    function nextButton() {
+        //NEXT BUTTON
+        if (pg < maxpg) {
+            //only make active if not on the last page
+            return `<a href="?pg=` + (pg + 1) + navScrollTo + `"/>` + imgOrText(imageToggle, 2) + `</a>`;
+        } else {
+            if (!imageToggle) {
+                return imgOrText(imageToggle, 2);
+            } else {
+                return ``;
+            }
+        }
+    }
+
+    function lastButton() {
+        //LAST BUTTON
+        if (pg < maxpg) {
+            //only make active if not on last page
+            return `<a href="?pg=` + maxpg + navScrollTo + `"/>` + imgOrText(imageToggle, 3) + `</a>`;
+        } else {
+            if (!imageToggle) {
+                return imgOrText(imageToggle, 3);
+            } else {
+                return ``;
+            }
+        }
+    }
+}
+
+//KEYBOARD NAVIGATION
+function keyNav() {
+  document.addEventListener("keydown", (e) => {
+  if ((e.key == 'ArrowRight' || e.key.toLowerCase() == 'd') && pg < maxpg) { //right arrow or D goes to next page
+    window.location.href = "?pg=" + (pg + 1) + navScrollTo;
+  } else if ((e.key == "ArrowLeft" || e.key.toLowerCase() == "a") && pg > 1) { //left arrow or A goes to previous page
+    window.location.href = "?pg=" + (pg - 1) + navScrollTo;
+  } else if (e.key.toLowerCase() == "w") { //W scrolls up
+    window.scrollBy({ top: -30 });
+  } else if (e.key.toLowerCase() == "s") { //S scrolls down
+    window.scrollBy({ top: 30 });
+  }
+});};