first commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+comms.db
+.env

LICENSE

@@ -0,0 +1,47 @@
+THE KARKAT PUBLIC LICENSE (KKPL)
+Version 2.2, January 2024
+
+Copyright (C) 2023-2024 MeowcaTheoRange
+<me@abtmtr.link>
+
+THIS LICENSE GRANTS PERMISSION TO ANY 
+TROLL, HUMAN, GROUP, OR ANY OTHER
+LEGALLY RECOGNIZED ENTITY ("YOU") TO
+MODIFY, USE, AND DISTRIBUTE
+("SCHMEEVE", "SCHMEEVING") THIS WORK
+WITHIN THE DESIRED SCOPE DEFINED BELOW,
+AS LONG AS THE KARKAT PUBLIC LICENSE
+PERSISTS WITHIN.
+
+BY SCHMEEVING THIS WORK, YOU AGREE TO
+BE BOUND BY THIS LICENSE'S TERMS AND
+CONDITIONS:
+
+0.  YOU WON'T BE A WUSS ABOUT THIS
+    LICENSE.
+1.  YOU WILL ONLY SCHMEEVE WITHIN THE
+    WORK'S DESIRED SCOPE FOR THIS
+    LICENSE.
+2.  YOU ACKNOWLEDGE THAT THE DEFINED
+    SCOPE OF THIS WORK COMES WITH NO
+    WARRANTY.
+3.  YOU FROND PROMISE THAT YOU WON'T
+    SUE IF YOUR COMPUTER EXPLODES
+    BECAUSE OF THIS PROGRAM.
+4.  YOU AGREE THAT KARKAT IS THE BEST
+    HACKER ON ALTERNIA.
+5.  YOU AGREE THAT BY WRITING IN THE
+    FORM BELOW, YOU ARE THE RIGHTFUL
+    OWNER OF THIS WORK.
+
+WHAT PARTS OF THE WORK DOES THIS DAMNED
+LICENSE APPLY TO:
+  All of it, except where otherwise clarified (/assets/fonts/, for example)
+WRITE THE WORK'S NAME HERE: 
+  THE KARKAT PUBLIC LICENSE (KKPL)
+  (Version 2.2, January 2024)
+WRITE THE NAME(S) OF THE WORK'S
+AUTHOR(S) HERE:
+  MeowcaTheoRange <me@abtmtr.link>
+
+FUCK FUCK FUCK FUCK FUCK FUCK FUCK.

assets/elements.css

@@ -0,0 +1,102 @@
+html, body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100%;
+  margin: 0 1rem;
+  box-sizing: border-box;
+}
+
+main {
+  margin: 0 auto;
+  padding: 1rem 0;
+  max-width: 768px;
+}
+
+header {
+  margin-block-end: 3rem;
+}
+
+footer {
+  margin-block-start: 3rem;
+  margin-block-end: 2rem;
+}
+
+h1, h2 {
+  margin: 1rem 0;
+}
+
+h3, h4, h5, h6, p {
+  margin: 0.5rem 0;
+}
+
+/* i hate styling this element */
+hr {
+  border: none;
+  background-color: currentColor;
+  color: inherit;
+  height: 1px;
+}
+
+li {
+  margin: 0.5rem 0;
+}
+
+section p {
+  white-space: pre-line;
+}
+
+details summary {
+  list-style-type: none; 
+}
+
+summary::after {
+  cursor: pointer;
+  content: "(?)";
+  margin-left: 0.5ch;
+  opacity: 0.5;
+  text-decoration: underline dotted;
+}
+
+summary:hover::after {
+  opacity: 0.4;
+}
+
+details[open] summary::after {
+  content: "(v)";
+}
+
+input[readonly], textarea[readonly] {
+  opacity: 0.5;
+}
+
+input, textarea {
+  background-color: transparent;
+  color: inherit;
+  border: 1px solid currentColor;
+  padding: 4px 8px;
+  font: inherit;
+}
+
+input[type=submit],
+input[type=reset],
+input[type=button] {
+  border: 2px solid currentColor;
+  cursor: pointer;
+  padding: 8px 16px;
+}
+
+input[type=submit]:hover,
+input[type=reset]:hover,
+input[type=button]:hover,
+a:hover,
+button:hover {
+  opacity: 0.8;
+}
+
+a {
+  color: currentColor;
+  font-weight: 500;
+}

assets/layout.css

@@ -0,0 +1,107 @@
+.cakeView {
+  margin: 1em 0;
+}
+
+.cakeView img {
+  float: inline-start;
+  object-fit: cover;
+  margin-inline-end: 1em;
+}
+
+.cakeView p::after {
+  clear: both;
+  display: block;
+  content: "";
+}
+
+.compareView {
+  margin: 1em 0;
+}
+
+.compareView img {
+  float: inline-end;
+  object-fit: cover;
+  margin-inline-end: 1em;
+}
+
+.compareView ul::after {
+  clear: both;
+  display: block;
+  content: "";
+}
+
+.yesNoListView {
+  margin: 1em 0;
+}
+
+.yesNoListView img {
+  float: inline-end;
+  object-fit: cover;
+  margin-inline-end: 1em;
+}
+
+.yesNoListView ul::after {
+  clear: both;
+  display: block;
+  content: "";
+}
+
+.yesNoListView .yesNoListView_Yes {
+  list-style-type: "✅ ";
+}
+
+.yesNoListView .yesNoListView_No {
+  list-style-type: "❌ ";
+}
+
+.listView {
+  margin: 1em 0;
+}
+
+.galleryView ul {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+  overflow: auto;
+  padding: 0;
+  scroll-snap-type: inline mandatory;
+  scroll-snap-stop: normal;
+}
+
+.galleryView ul li {
+  scroll-snap-align: center;
+  list-style-type: none;
+  text-align: center;
+}
+
+.galleryView ul li img {
+  max-width: 100%;
+  max-height: 500px;
+}
+
+.linkView {
+  display: grid;
+  grid-auto-flow: column;
+  padding: 0;
+  margin: 1em 0;
+}
+
+.linkView li {
+  display: inline-block;
+  text-align: center;
+}
+
+.linkView .ticker {
+  opacity: 0.5;
+  user-select: none;
+}
+
+.satisfiedBox {
+  margin: 2rem 0;
+  padding-inline-start: 1rem;
+}
+
+.satisfiedBox h2::before {
+  content: "↗ ";
+  margin-inline-start: -1em;
+}

assets/style.css

@@ -0,0 +1,58 @@
+@import url("/assets/styles/fade-in.css");
+
+@font-face {
+  font-family: "Red Hat Display";
+  src: url("/assets/fonts/RHD/RedHatDisplay.ttf");
+}
+
+@font-face {
+  font-family: "Red Hat Text";
+  src: url("/assets/fonts/RHT/RedHatText.ttf");
+}
+
+body {
+  --bg: white;
+  background-color: white;
+  color: black;
+  font-family: "Red Hat Text";
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Red Hat Display";
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    --bg: black;
+    background-color: black;
+    color: white;
+  }
+
+  img:not(.screen) {
+    filter: invert(100%) hue-rotate(180deg);
+  }
+}
+
+.yesNoListView {
+  border: 1px solid currentColor;
+  padding-top: 0;
+  padding-left: 1rem;
+  padding-right: 0;
+  padding-bottom: 0.5rem;
+}
+
+.yesNoListView img {
+  margin-top: 1rem;
+}
+
+.linkView {
+  margin: 0 1em;
+}
+
+input[type=submit],
+input[type=reset],
+input[type=button],
+a,
+button {
+  transition: 0.25s opacity;
+}

assets/styles/fade-in.css

@@ -0,0 +1,70 @@
+@keyframes fade-in-b {
+  0% {
+    opacity: 0;
+    translate: 0 0.5rem;
+  }
+  100% {
+    opacity: 1;
+    translate: 0;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  main > *:not(h1):not(h2):not(h3) {
+    animation: fade-in-b 0.5s cubic-bezier(0.87, 0, 0.13, 1) both;
+  }
+  
+  main h1,
+  main h2,
+  main h3 {
+    animation: fade-in-b 0.625s cubic-bezier(0.87, 0, 0.13, 1) both;
+  }
+
+  .linkView li.ticker {
+    animation: fade-in 0.5s cubic-bezier(0.87, 0, 0.13, 1) 0.5s both;
+  }
+
+  .linkView li:not(.ticker) a {
+    display: inline-block;
+    transition: opacity 0.25s, translate 0.125s;
+  }
+  
+  .linkView li:not(.ticker) a:hover {
+    translate: 0 1px;
+  }
+  
+  .linkView li:not(.ticker) a:active {
+    opacity: 0.5;
+    translate: 0 2px;
+  }
+  
+  summary::after {
+    display: inline-block;
+    transition: opacity 0.25s, translate 0.125s;
+  }
+  
+  summary:hover::after {
+    translate: 0 -1px;
+  }
+  
+  summary:active::after {
+    translate: 0 -2px;
+  }
+  
+  details[open] summary:hover::after {
+    translate: 0 1px;
+  }
+  
+  details[open] summary:active::after {
+    translate: 0 2px;
+  }
+}

index.js

@@ -0,0 +1,52 @@
+import express from "express";
+import { config as dotenvConfig } from "dotenv";
+import path from "path";
+
+dotenvConfig();
+
+const __dirname = import.meta.dirname;
+
+const app = express();
+
+app.set('trust proxy', true);
+app.set('view engine', 'ejs');
+app.use('/assets', express.static('assets'));
+app.set('views', path.join(__dirname, "views", "pages"));
+
+app.locals = {
+  __dirname
+}
+
+app.get('/', async (req, res) => {
+  res.render('index');
+})
+
+app.get('/whaticando', async (req, res) => {
+  res.render('whaticando');
+})
+
+app.get('/tos', async (req, res) => {
+  res.render('tos');
+})
+
+app.get('/pricing', async (req, res) => {
+  res.render('pricing');
+})
+
+app.get('/contact', async (req, res) => {
+  res.render('contact');
+})
+
+app.get("/favicon.ico", (req, res) => {
+  res.redirect("https://cdn.abtmtr.link/site_content/favicon.ico")
+})
+
+app.all('*', (req, res) => {
+  res.redirect("/");
+})
+
+app.listen(process.env.PORT, () => {
+  const url = new URL("http://localhost/");
+  url.port = process.env.PORT;
+  console.log(`Example app listening on ${url.toString()}`);
+});

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "sitecommssite",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "nodemon index.js"
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "node_modules/**",
+      "comms.db",
+      "views/**"
+    ],
+    "ext": "*"
+  },
+  "type": "module",
+  "license": "ISC",
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "ejs": "^3.1.10",
+    "express": "^4.21.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.7"
+  }
+}

views/components/cakeView.ejs

@@ -0,0 +1,5 @@
+<section class="cakeView">
+  <h2><%= title %></h2>
+  <img src="<%= image %>" alt="<%= alt %>" title="<%= alt %>" width="128" height="128"/>
+  <p><%- description %></p>
+</section>

views/components/compareView.ejs

@@ -0,0 +1,18 @@
+<section class="compareView">
+  <img src="<%= image %>" alt="<%= alt %>" title="<%= alt %>" width="256" height="128"/>
+  <h2><%= title %></h2>
+  <ul>
+  <% description.forEach(([ summary, content ]) => { %>
+    <li>
+    <% if (content) { %>
+      <details>
+        <summary><%= summary %></summary>
+        <p><%= content %></p>
+      </details>
+    <% } else { %>
+      <span><%= summary %></span>
+    <% } %>
+    </li>
+  <% }) %>
+  </ul>
+</section>

views/components/galleryView.ejs

@@ -0,0 +1,13 @@
+<section class="galleryView">
+  <h2><%= title %></h2>
+  <ul>
+  <% images.forEach(([ img, desc, url ]) => { %>
+    <li>
+      <figure>
+        <img class="screen" src="<%= img %>" alt="<%= desc %>" title="<%= desc %>" />
+        <figcaption><a href="<%= url %>"><%= desc %></a></figcaption>
+      </figure>
+    </li>
+  <% }) %>
+  </ul>
+</section>

views/components/linkView.ejs

@@ -0,0 +1,7 @@
+<ul class="linkView">
+<% links.forEach(([ name, link ], i) => { %>
+  <li><a href="<%= link %>"><%= name %></a></li>
+  <% if (i != links.length - 1) { %><li hidden aria-hidden="true" class="ticker">&gt;&gt;</li><% } %>
+  <!-- hidden in case of nocss -->
+<% }) %>
+</ul>

views/components/listView.ejs

@@ -0,0 +1,17 @@
+<section class="listView">
+  <h2><%= title %></h2>
+  <ul>
+  <% description.forEach(([ summary, content ]) => { %>
+    <li>
+    <% if (content) { %>
+      <details>
+        <summary><%- summary %></summary>
+        <p><%- content %></p>
+      </details>
+    <% } else { %>
+      <span><%- summary %></span>
+    <% } %>
+    </li>
+  <% }) %>
+  </ul>
+</section>

views/components/specific/footer.ejs

@@ -0,0 +1,5 @@
+<footer style="text-align: center;">
+  <h1>abtmtr.link site commissions v1</h1>
+  <p>&copy; abtmtr.link 2024</p>
+  <p>fonts are <a href="https://fonts.google.com/specimen/Red+Hat+Display" target="_blank">Red Hat Display</a> and <a href="https://fonts.google.com/specimen/Red+Hat+Text" target="_blank">Red Hat Text</a>.</p>
+</footer>

views/components/specific/header.ejs

@@ -0,0 +1,12 @@
+<header style="text-align: center;">
+  <h1>abtmtr.link site commissions</h1>
+  <%- include(__dirname + "/views/components/linkView.ejs", {
+    links: [
+      ["home", "/"],
+      ["wicd", "/whaticando/"],
+      ["tos", "/tos/"],
+      ["pricing", "/pricing/"],
+      ["contact", "/contact/"],
+    ]
+  }) %>
+</header>

views/components/yesNoListView.ejs

@@ -0,0 +1,31 @@
+<section class="yesNoListView">
+  <img src="<%= image %>" alt="<%= alt %>" title="<%= alt %>" width="256" height="128"/>
+  <h2><%= title %></h2>
+  <p><%= description %></p>
+  <ul>
+  <% yes.forEach(([ summary, content ]) => { %>
+    <li class="yesNoListView_Yes">
+    <% if (content) { %>
+      <details>
+        <summary><%- summary %></summary>
+        <p><%- content %></p>
+      </details>
+    <% } else { %>
+      <span><%- summary %></span>
+    <% } %>
+    </li>
+  <% }) %>
+  <% no.forEach(([ summary, content ]) => { %>
+    <li class="yesNoListView_No">
+    <% if (content) { %>
+      <details>
+        <summary><%- summary %></summary>
+        <p><%- content %></p>
+      </details>
+    <% } else { %>
+      <span><%- summary %></span>
+    <% } %>
+    </li>
+  <% }) %>
+  </ul>
+</section>

views/pages/contact.ejs

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>abtmtr.link site commissions</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/assets/layout.css">
+    <link rel="stylesheet" href="/assets/elements.css">
+    <link rel="stylesheet" href="/assets/style.css">
+  </head>
+  <body>
+    <main>
+      <%- include(__dirname + "/views/components/specific/header.ejs") %>
+      <%- include(__dirname + "/views/components/cakeView.ejs", {
+        image: "/assets/imgs/emailMatkap.png",
+        alt: "matkap staring dazed at a physical letter with the letter \"E\" on it, signifying e-mail. he says \"WOW\" at it.",
+        title: "welcome to the contact page!",
+        description: `you made it! are you ready?
+to make sure you are, so far you should know what you want, what i can do, have acknowledged my terms of service, have chosen a site type, and are sure that you want to continue with this commission request.
+
+got that? then go ahead and shoot me a request!`
+      }) %>
+      <h2>use the contact form</h2>
+      <p>if you're nervous about starting emails like I am sometimes, try this contact form.</p>
+      <form action="mailto:me@abtmtr.link" method="get" target="_blank">
+        <p>
+          <label for="to">To:</label>
+          <input type="email" id="to" readonly value="me@abtmtr.link" placeholder="To" />
+        </p>
+        <p>
+          <label for="subject">Subject:</label>
+          <input type="text" id="subject" name="subject" value="[SITE COMMISSION REQUEST] Hello! I'd like to request a site slot..." />
+        </p>
+        <p>
+          <label for="body">Body:</label><br />
+          <textarea name="body" id="body" style="width: 100%;box-sizing: border-box;resize: vertical;" rows="6">I'd like to request a [website type]...
+I would like it to be about [site details]...
+and it will [purpose of site]...
+I'll need [possible extra features or other requirements]...
+My Cash App cashtag is $[cashtag]...
+Thanks!</textarea>
+        </p>
+        <input type="submit" id="submit" value="Send email" />
+      </form>
+      <h2>email me directly</h2>
+      <p>Or, if you're more confident, you can send me an email by yourself.</p>
+      <p><a href="mailto:me@abtmtr.link" target="_blank">me@abtmtr.link</a></p>
+      <%- include(__dirname + "/views/components/specific/footer.ejs") %>
+    </main>
+  </body>
+</html>

views/pages/index.ejs

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>abtmtr.link site commissions</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/assets/layout.css">
+    <link rel="stylesheet" href="/assets/elements.css">
+    <link rel="stylesheet" href="/assets/style.css">
+  </head>
+  <body>
+    <main>
+      <%- include(__dirname + "/views/components/specific/header.ejs") %>
+      <%- include(__dirname + "/views/components/cakeView.ejs", {
+        image: "/assets/imgs/homosuckMatkap.png",
+        alt: "matkap looking ridiculous with his hands in the air",
+        title: "hey, i'm MeowcaTheoRange.",
+        description: `i've got a feeling you want a <b>good site</b> that's <b>special</b>, <b>performs well</b> on <b>all devices</b>, and <b>pleases new visitors</b> and <b>existing fans</b> alike. 
+        you want it to <b>bring attention to what you do</b>, what you <b>dedicate yourself to</b>, what you're <b>passionate about</b>, or <b>what you're selling</b>... but you <b>don't quite have the know-how to get it done</b>.
+        
+        don't worry - in that case, <b>i've got your back</b>!`
+      }) %>
+      <%- include(__dirname + "/views/components/compareView.ejs", {
+        image: "/assets/imgs/perplexedPerson.png",
+        alt: "some person looking perplexed at their computer loading a website",
+        title: "why you should consider my services",
+        description: [
+          ["i know how to make sites perform well.", `i design my sites in HTML, only using JavaScript for flair and utility. this speeds up loading times by not requiring as much as a modern site would demand.`],
+          ["after i make wewbsite you can extend it i dont care"],
+          ["every single carrd pro feature is included in commission price except for the domain and hosting stuff i can't do that for you",
+          `if you'd like a form to send you an email, Google Analytics, or a special HTML thingy on your site, it'll run you no extra cost.`],
+          ["i am building the website for you"],
+          ["styling is separate from page content", `if you aren't sure about a color, the layout, or the font of a page, you won't have to go through every element to do it. changing any of these (even while I'm working on it) will run you no extra cost.`]
+        ]
+      }) %>
+      <%- include(__dirname + "/views/components/compareView.ejs", {
+        image: "/assets/imgs/smellyCarrd.png",
+        alt: "a large red no-entry symbol over a smelly computer with a carrd page on it",
+        title: "why you shouldn't use carrd",
+        description: [
+          ["you've got a limited amount of elements", `if you've ever tried to seriously use carrd, you've probably hit the limits of elements at least once.`],
+          ["it's only one page", `fancy site transitions are nice, but it runs the cost of having *all of your site* on one page loaded at once, which isn't that good.`],
+          ["you still have to build your site yourself!"]
+        ]
+      }) %>
+      <%- include(__dirname + "/views/components/listView.ejs", {
+        title: "what you'll need",
+        description: [
+          ["some idea of what you'll want your site to look like.", 
+          `what colors? what font? what will the pages be? what will they look like? what content will they have? do you want anything to be interactive? any galleries?
+            
+          this is a storm of questions, sure, but they're only here to get you thinking.`
+          ],
+          ["some idea of what you'll want your site to do.", 
+          `at the moment, i'm looking to work on commission sites specifically. i might be able to do other types of sites if requested, but anything personal is out of my scope.`],
+          ["the ability to send and recieve emails.", 
+          `i don't have any social media other than FurAffinity. no Twitter, no Instagram, nothing. regarding commission requests, i'll only accept email.`],
+          ["the ability to send and recieve Cash App requests.",
+          `Stripe screwed me, PayPal exposes PII, and Ko-fi requires one of both. Cash App is sketch, sure, but it's one of the only ways i can get money into my bank account.`],
+          ["patience.",
+          `making a website takes a long time, and while (i think) i may be faster at it than most, i'll still need some time. i will send occasional updates about the site, though.`]
+        ]
+      }) %>
+      <section class="satisfiedBox">
+        <h2>is this looking good so far?</h2>
+        <p>you should check out <a href="/whaticando/">what i can do</a>.</p>
+      </section>
+      <%- include(__dirname + "/views/components/specific/footer.ejs") %>
+    </main>
+  </body>
+</html>

views/pages/pricing.ejs

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>abtmtr.link site commissions</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/assets/layout.css">
+    <link rel="stylesheet" href="/assets/elements.css">
+    <link rel="stylesheet" href="/assets/style.css">
+  </head>
+  <body>
+    <main>
+      <%- include(__dirname + "/views/components/specific/header.ejs") %>
+      <%- include(__dirname + "/views/components/cakeView.ejs", {
+        image: "/assets/imgs/trustmeMatkap.png",
+        alt: "matkap, wall-eyed, with a wide grin, top-hat, and an improperly-worn tie.",
+        title: "it's business time.",
+        description: `so, you've seen what i can do, and you've given what you want a little thought... now what's the cost of all of this?
+
+check out the site types and see what fits you.`
+      }) %>
+      <%- include(__dirname + "/views/components/compareView.ejs", {
+        image: "/assets/imgs/pricing/type_all.png",
+        alt: "matkap smiling at the viewer, with a browser on the other side. sparkles are around both.",
+        title: "all site types can/will include",
+        description: [
+          ["a 404 page (not included in page count)", `let me know what you're using to host, and i'll adjust the file accordingly.`],
+          ["static assets (images, favicon, videos, JSON files, etc.)"],
+          ["HTML and CSS"],
+          ["no limits on page content"],
+          ["no limits on widgets, embeds, 88x31s, blinkies, whatever"],
+          ["no abtmtr.link watermark or whatever", "credit me if you want, though"],
+          ["no hosting on abtmtr.link"],
+        ]
+      }) %>
+      <br />
+      <%- include(__dirname + "/views/components/yesNoListView.ejs", {
+        image: "/assets/imgs/pricing/type_basic.png",
+        alt: "some pages, and a browser accessing the first page in the list with a person extending their right arm up to the browser.",
+        title: "basic site ($20 USD)",
+        description: `the most basic site you can get from me.
+
+this site type is good if you just want a website. nothing sparkly, just a site that looks good and works well.
+if you've got socials, a toyhouse, and a ko-fi, this can be your go-to.
+
+minimum deadline: 4 weeks
+est. time: 1-2 weeks`,
+        yes: [
+          ["3 pages max (incl. homepage)"],
+          ["HTML forms"],
+          ["Google Analytics (if you want)"],
+        ],
+        no: [
+          ["JavaScript"],
+          ["subpages"],
+        ]
+      }) %>
+      <%- include(__dirname + "/views/components/yesNoListView.ejs", {
+        image: "/assets/imgs/pricing/type_good.png",
+        alt: "a couple pages, and a browser with a gallery and an advertisement with an among us crewmate and the word \"adversising [sic]\".",
+        title: "good site ($30 USD)",
+        description: `this site type is good if you don't need a lot out of your site.
+if you already use some kind of commission management system, and are happy with just making your requests more parseable, this is a good pick for you.
+
+minimum deadline: 1 month
+est. time: 2-4 weeks`,
+        yes: [
+          ["Everything from <i>basic site</i>"],
+          ["5 pages max (incl. homepage)"],
+          ["basic JavaScript"],
+          ["JS forms"],
+          ["gallery views (image only)"],
+          ["subpages"],
+        ],
+        no: [
+        ]
+      }) %>
+      <%- include(__dirname + "/views/components/yesNoListView.ejs", {
+        image: "/assets/imgs/pricing/type_awesome.png",
+        alt: "a portfolio website, with a sale dialog over it. the sale code is \"HIIIIALL\".",
+        title: "awesome site ($80 USD)",
+        description: `good site, but better. or: matkap special, but more basic.
+the Nitro Basic of abtmtr.link's site commissions.
+
+this site type is good for an advanced commissions site - one that can count slots, availability, types of commissions, whatever you'll need.
+
+minimum deadline: 2 months
+est. time: 1-2 months`,
+        yes: [
+          ["Everything from <i>good site</i>"],
+          ["20 pages max (incl. homepage)"],
+          ["functional cookies, local storage, and session storage"],
+          ["Dynamic assets (fetch from other places/APIs)"],
+          ["framework usage (Next.js, React, EJS)"],
+        ],
+        no: [
+        ]
+      }) %>
+      <%- include(__dirname + "/views/components/yesNoListView.ejs", {
+        image: "/assets/imgs/pricing/type_matkap.png",
+        alt: "matkap sitting wall-eyed at a computer, chewing on grass. he is coding a website displaying the word \"SITE.\" on the screen.",
+        title: "matkap special site ($100 USD)",
+        description: `channel the spirit of matkap and... eat grass or something. i don't know what he does.
+
+this site type is good for handling customer tickets/messages/whatever without requiring a Trello board.
+
+minimum deadline: 4 months
+est. time: 2-3 months`,
+        yes: [
+          ["Everything from <i>awesome site</i>"],
+          ["no page maximum"],
+          ["Forms with custom APIs"],
+          ["Express server"],
+          ["SQLite database"],
+        ],
+        no: [
+        ]
+      }) %>
+      <br />
+      <h2>or, i can quote you a site</h2>
+      <%- include(__dirname + "/views/components/yesNoListView.ejs", {
+        image: "/assets/imgs/pricing/type_all.png",
+        alt: "matkap smiling at the viewer, with a browser on the other side. sparkles are around both.",
+        title: "quoted site ($20+ USD)",
+        description: `oh god oh fuck it looks like i'll have to do some mental math.
+
+this site type is good if you need something specific.
+
+price depends on quoted content, plus the base fee.
+(the quote itself is free i'm not gonna charge you for a damn email exchange)
+
+minimum deadline: ???
+est. time: ???`,
+        yes: [
+          ["fuck around and find out"],
+        ],
+        no: [
+          ["<a href=\"https://youtu.be/iZlpsneDGBQ\" target=\"_blank\">freedom from consequences</a>"],
+        ]
+      }) %>
+      <br />
+      <section class="satisfiedBox">
+        <h2>does everything look OK?</h2>
+        <p>feel free to go ahead and <a href="/contact/">contact me</a>.</p>
+      </section>
+      <%- include(__dirname + "/views/components/specific/footer.ejs") %>
+    </main>
+  </body>
+</html>

views/pages/tos.ejs

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>abtmtr.link site commissions</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/assets/layout.css">
+    <link rel="stylesheet" href="/assets/elements.css">
+    <link rel="stylesheet" href="/assets/style.css">
+  </head>
+  <body>
+    <main>
+      <%- include(__dirname + "/views/components/specific/header.ejs") %>
+      <%- include(__dirname + "/views/components/cakeView.ejs", {
+        image: "/assets/imgs/nsfwMatkap.png",
+        alt: "matkap, staring up at a black bar that says \"NSFW\" on it. he says \"OH NO\"...",
+        title: "let's set some boundaries.",
+        description: `i've gotta make sure you're picking up what i'm putting down. this is what you will agree to acknowledge when you contact me regarding site commissions.
+
+...all of it is incredibly important. please read this page.`
+      }) %>
+      <%- include(__dirname + "/views/components/listView.ejs", {
+        image: "/assets/imgs/pricing/type_all.png",
+        alt: "matkap smiling at the viewer, with a browser on the other side. sparkles are around both.",
+        title: "terms of service",
+        description: [
+          ["i won't do NSFW. if you request NSFW from me, i will block your email address and your entire domain if applicable. don't do it. don't try me. <b>I AM A MINOR!!!!</b>"],
+          ["after i am done making your site, you can license it however you want and credit me if you want to.\n<b>if the site contains any copyrighted content not owned or licensed by the party who will own the site, however, the site's license will be limited to All Rights Reserved.</b>"],
+          ["during the site's creation, the site is <b>under my ownership</b>. if the commission is cancelled, however, you can request that the site, finished or unfinished, have its ownership transfered to you."],
+          ["i'd prefer you to send me some design reference, but if you don't have one, i can try my best to cook one up for you."],
+          ["i have the right to <b>deny or stop working on your commission at any time</b>. if your commission is cancelled after payment, <b>expect a refund</b> within (at maximum) a few days."],
+          ["you also have the right to deny or cancel a commission at any point until styling and layout is finished. expect a refund at a reduced amount depending on when the cancellation was made."],
+          ["changes in styling and minor changes to the site's layout can be done at any point. major changes to site layout or scripts should be clarified before the site is finished."],
+          ["when you contact me, i'd like to know your payment details in advance so i can verify that money is being sent the right way (and for refunds). i'll let you know mine in further correspondence for security-adjacent verification purposes."],
+          ["if there's a deadline, <b>please let me know</b>. my minimum notice time is <b>2 weeks or longer</b> depending on the site type. anything shorter will <b>cause your commission to be declined</b>."],
+          ["if i am uncomfortable doing certain things with your site, i will let you know.", "to keep it brief, i am uncomfortable with piracy, advertising, unimportant cookies, tracking, and dishonest phrasing."],
+          ["i will try to provide updates on progress as i work on your site. if you don't want updates, or want updates and confirmation to be sent to a different email, please let me know beforehand."]
+        ]
+      }) %>
+      <section class="satisfiedBox">
+        <h2>did'ya get all that?</h2>
+        <p>then you're cleared to check out <a href="/pricing/">my prices</a>.</p>
+      </section>
+      <%- include(__dirname + "/views/components/specific/footer.ejs") %>
+    </main>
+  </body>
+</html>

views/pages/whaticando.ejs

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>abtmtr.link site commissions</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/assets/layout.css">
+    <link rel="stylesheet" href="/assets/elements.css">
+    <link rel="stylesheet" href="/assets/style.css">
+  </head>
+  <body>
+    <main>
+      <%- include(__dirname + "/views/components/specific/header.ejs") %>
+      <%- include(__dirname + "/views/components/cakeView.ejs", {
+        image: "/assets/imgs/whatMatkap.png",
+        alt: "matkap with a double-chin looking wall-eyed over the viewer, mouth open and drooling.",
+        title: "here's what i can do.",
+        description: `now you're sold... maybe you even know what you need. here's what i can do in terms of site design!`
+      }) %>
+      <%- include(__dirname + "/views/components/listView.ejs", {
+        title: "i can make functional sites!",
+        description: [
+          ["i've had 4 years of experience in web design, and have been programming my whole life."],
+          ["i'm good at CSS and styling", "if you can put it on a piece of paper, i can probably do it in CSS."],
+          ["i can make your site work well", "i'm not scared to write a little javascript, and i'll do anything in my toolset to make sure your site works consistently."],
+          ["i can make your site speedy", "to be honest, my biggest pet peeve is slow websites. i focus on making sure things are fast and performant."],
+          ["i can also use frameworks, if you want", "i've had experience in Next.js, React in general, and EJS (my favourite)."]
+        ]
+      }) %>
+      <%- include(__dirname + "/views/components/listView.ejs", {
+        title: "i'm very versatile!",
+        description: [
+          ["i've got experience in frontend and backend. i know my stuff and if you want a backend with your site, i can help you with that!"],
+          ["i'm a very fast learner, so if you want something new that i don't already know, i'll probably be able to implement it effectively."],
+        ]
+      }) %>
+      <%- include(__dirname + "/views/components/galleryView.ejs", {
+        title: "examples",
+        images: [
+          ["/assets/imgs/examples/abtmtr_link.png", "my personal site, abtmtr.link. a good example of a functional site without a lick of frontend JavaScript.", "https://abtmtr.link/"],
+          ["/assets/imgs/examples/sp_abtmtr_link.png", "sp.abtmtr.link, utilizing SVGs and JavaScript to make visualizations.", "https://sp.abtmtr.link/"],
+          ["/assets/imgs/examples/tc_abtmtr_link.png", "tc.abtmtr.link (once trollcall.xyz), a now defunct character publishing site.", "https://tc.abtmtr.link/"],
+        ]
+      }) %>
+      <section class="satisfiedBox">
+        <h2>like what you see?</h2>
+        <p>continue by making sure you're aware of <a href="/tos/">my terms of service</a>.</p>
+      </section>
+      <%- include(__dirname + "/views/components/specific/footer.ejs") %>
+    </main>
+  </body>
+</html>