From c673a4dbc9b3f99fb84cdc17641bf0080328fcdc Mon Sep 17 00:00:00 2001
From: localhost <o0l2qp3e@duck.com>
Date: Tue, 14 Oct 2025 20:53:40 +0200
Subject: [PATCH] beta testing the html serving via backend

---
 bun.lockb                            | Bin 35191 -> 50300 bytes
 package.json                         |   4 +
 public/favicon.svg                   |   1 +
 public/pgp.txt                       |  52 ++++++
 public/robots.txt                    |  41 ++++
 src/index.ts                         |   7 +
 src/router/html.ts                   |  68 +++++++
 src/router/latest.ts                 |  24 ++-
 src/router/search.ts                 |  22 ++-
 src/router/transparency.ts           |  52 ++++--
 src/router/video.ts                  | 109 +++++++++--
 src/templates/abuse.eta              |  67 +++++++
 src/templates/channel-videos.eta     |  76 ++++++++
 src/templates/channel.eta            |  92 +++++++++
 src/templates/dmca.eta               |  51 +++++
 src/templates/donate.eta             |  49 +++++
 src/templates/index.eta              | 225 ++++++++++++++++++++++
 src/templates/latest.eta             |  80 ++++++++
 src/templates/layout.eta             | 144 ++++++++++++++
 src/templates/privacy.eta            |  61 ++++++
 src/templates/save.eta               |  57 ++++++
 src/templates/savechannel.eta        |  57 ++++++
 src/templates/search.eta             |  74 ++++++++
 src/templates/transparency-entry.eta |  46 +++++
 src/templates/transparency.eta       |  21 +++
 src/templates/watch.eta              | 268 +++++++++++++++++++++++++++
 src/utils/html.ts                    |  13 ++
 27 files changed, 1712 insertions(+), 49 deletions(-)
 create mode 100644 public/favicon.svg
 create mode 100644 public/pgp.txt
 create mode 100644 public/robots.txt
 create mode 100644 src/router/html.ts
 create mode 100644 src/templates/abuse.eta
 create mode 100644 src/templates/channel-videos.eta
 create mode 100644 src/templates/channel.eta
 create mode 100644 src/templates/dmca.eta
 create mode 100644 src/templates/donate.eta
 create mode 100644 src/templates/index.eta
 create mode 100644 src/templates/latest.eta
 create mode 100644 src/templates/layout.eta
 create mode 100644 src/templates/privacy.eta
 create mode 100644 src/templates/save.eta
 create mode 100644 src/templates/savechannel.eta
 create mode 100644 src/templates/search.eta
 create mode 100644 src/templates/transparency-entry.eta
 create mode 100644 src/templates/transparency.eta
 create mode 100644 src/templates/watch.eta
 create mode 100644 src/utils/html.ts

diff --git a/bun.lockb b/bun.lockb
index f959ebbbdc03993a6ab724cb78157ea569ea7a87..b169c1549fa10e5cf8010a8172f875198d8d7114 100755
GIT binary patch
delta 14428
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
BL@fXS

delta 4893
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

diff --git a/package.json b/package.json
index 6a259f0..b97df07 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,13 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
+    "@elysiajs/static": "^1.4.0",
+    "@types/html-minifier-next": "^2.1.0",
     "@types/pg": "^8.11.10",
     "date-fns": "^4.1.0",
     "elysia": "^1.1.25",
+    "eta": "^4.0.1",
+    "html-minifier-next": "^2.1.4",
     "ioredis": "^5.4.1",
     "isomorphic-dompurify": "^2.18.0",
     "kysely": "^0.27.4",
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..d32a04d
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M5 21q-.825 0-1.413-.588T3 19V6.5q0-.375.125-.675t.325-.575l1.4-1.7q.2-.275.5-.413T6 3h12q.35 0 .65.137t.5.413l1.4 1.7q.2.275.325.575T21 6.5V19q0 .825-.588 1.413T19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM12 17.575q.2 0 .375-.062t.325-.213l2.6-2.6q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275l-.9.9V11q0-.425-.288-.713T12 10q-.425 0-.713.288T11 11v3.2l-.9-.9q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.6 2.6q.15.15.325.212t.375.063Z"/></svg>
\ No newline at end of file
diff --git a/public/pgp.txt b/public/pgp.txt
new file mode 100644
index 0000000..8aa8d90
--- /dev/null
+++ b/public/pgp.txt
@@ -0,0 +1,52 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+cw3z0oKcZ3Irwfu2LQ==
+=5zdM
+-----END PGP PUBLIC KEY BLOCK-----
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..b2cffa8
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,41 @@
+User-agent: *
+Disallow: /playlist
+Disallow: /hashtag/*
+Disallow: /live/*
+Disallow: /user/*
+Disallow: /shorts/*
+Disallow: /c/*
+Disallow: /@*
+
+# seo backlink bots are a waste of bandwidth
+User-agent: dotbot
+Disallow: /
+
+User-agent: BLEXBot
+Disallow: /
+
+User-agent: SemrushBot
+Disallow: /
+
+User-agent: AhrefsBot
+Disallow: /
+
+User-agent: barkrowler
+Disallow: /
+
+User-agent: VelenPublicWebCrawler
+Disallow: /
+
+User-agent: AwarioRssBot
+Disallow: /
+
+User-agent: AwarioSmartBot
+Disallow: /
+
+User-agent: PetalBot
+Disallow: /
+
+User-Agent: ImagesiftBot 
+Disallow: / 
+
+Sitemap: https://api.preservetube.com/sitemap.xml
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index dc96d78..ceb92d4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,10 +1,12 @@
 import { Elysia } from 'elysia';
+import { staticPlugin } from '@elysiajs/static'
 
 import latest from '@/router/latest'
 import search from '@/router/search'
 import transparency from '@/router/transparency'
 import video from '@/router/video'
 import websocket from '@/router/websocket'
+import html from '@/router/html'
 
 const app = new Elysia()
 app.use(latest)
@@ -12,11 +14,16 @@ app.use(search)
 app.use(transparency)
 app.use(video)
 app.use(websocket)
+app.use(html)
+app.onRequest(({ set, path }: any) => {
+  set.headers['Onion-Location'] = 'http://tubey5btlzxkcjpxpj2c7irrbhvgu3noouobndafuhbw4i5ndvn4v7qd.onion' + path
+})
 
 process.on('uncaughtException', err => {
   console.log(err)
 })
 
+app.use(staticPlugin({ prefix: '/' }))
 app.listen(1337);
 console.log(
   `api is running at ${app.server?.hostname}:${app.server?.port}`
diff --git a/src/router/html.ts b/src/router/html.ts
new file mode 100644
index 0000000..a0c778e
--- /dev/null
+++ b/src/router/html.ts
@@ -0,0 +1,68 @@
+import { Elysia } from 'elysia';
+import { m, eta } from '@/utils/html'
+const app = new Elysia()
+
+app.get('/', async ({ set }) => {
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return await m(eta.render('./index', { 
+    title: 'Home | PreserveTube',
+    description: 'PreserveTube is a time capsule for YouTube videos! It allows you to preserve any YouTube video, creating a snapshot that will always be available even if the original video disappears or is taken down.',
+    keywords: 'youtube archive, youtube video history, youtube deleted, youtube deleted video, youtube downloader, youtube archiver'
+  }))
+})
+
+app.get('/save', async ({ query: { url }, set, error }) => {
+  if (!url) return error(400, 'No url provided.')
+
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return await m(eta.render('./save', { 
+    title: 'Save Video | PreserveTube',
+    websocket: process.env.WEBSOCKET,
+    sitekey: process.env.SITEKEY,
+    url
+  }))
+})
+
+app.get('/savechannel', async ({ query: { url }, set, error }) => {
+  if (!url) return error(400, 'No url provided.')
+
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return await m(eta.render('./savechannel', { 
+    title: 'Save Channel | PreserveTube',
+    websocket: process.env.WEBSOCKET,
+    sitekey: process.env.SITEKEY,
+    url
+  }))
+})
+
+app.get('/abuse', async ({ set }) => {
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return await m(eta.render('./abuse', { 
+    title: 'Abuse Report | PreserveTube',
+  }))
+})
+
+app.get('/dmca', async ({ set }) => {
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return await m(eta.render('./dmca', { 
+    title: 'DMCA Takedown | PreserveTube',
+  }))
+})
+
+app.get('/privacy', async ({ set }) => {
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return await m(eta.render('./privacy', { 
+    title: 'Privacy Policy | PreserveTube',
+  }))
+})
+
+app.get('/donate', async ({ set }) => {
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return await m(eta.render('./donate', { 
+    title: 'Donations | PreserveTube',
+    description: "Support our mission through donations.",
+    keywords: "preservetube donations, crypto"
+  }))
+})
+
+export default app;
\ No newline at end of file
diff --git a/src/router/latest.ts b/src/router/latest.ts
index 3f71e4e..73e08de 100644
--- a/src/router/latest.ts
+++ b/src/router/latest.ts
@@ -1,24 +1,32 @@
 import { Elysia } from 'elysia';
-
 import { db } from '@/utils/database'
 import { createSitemapXML, createSitemapIndexXML } from '@/utils/sitemap'
+import { m, eta } from '@/utils/html'
 import redis from '@/utils/redis';
 
 const app = new Elysia()
 
-app.get('/latest', async () => {
-  const cached = await redis.get('latest')
-  if (cached) return JSON.parse(cached)
+app.get('/latest', async ({ set }) => {
+  const cached = await redis.get('latest:html')
+  if (cached) {
+    set.headers['Content-Type'] = 'text/html; charset=utf-8'
+    return cached
+  }
 
   const json = await db.selectFrom('videos')
     .select(['id', 'title', 'thumbnail', 'published', 'archived', 'channel', 'channelId', 'channelAvatar', 'channelVerified'])
     .orderBy('archived desc')
-    .limit(50)
+    .limit(51)
     .execute()
+  
+  const html = await m(eta.render('./latest', { 
+    data: json,
+    title: 'Latest | PreserveTube',
+  }))
+  await redis.set('latest:html', html, 'EX', 3600)
 
-  await redis.set('latest', JSON.stringify(json), 'EX', 3600)
-
-  return json
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return html
 })
 
 app.get('/sitemap-index.xml', async ({ set }) => {
diff --git a/src/router/search.ts b/src/router/search.ts
index 35bc72c..d85f1ae 100644
--- a/src/router/search.ts
+++ b/src/router/search.ts
@@ -3,6 +3,7 @@ import { RedisRateLimiter } from 'rolling-rate-limiter'
 
 import { db } from '@/utils/database'
 import { validateVideo, validateChannel } from '@/utils/regex'
+import { m, eta } from '@/utils/html'
 import redis from '@/utils/redis';
 
 const app = new Elysia()
@@ -14,20 +15,33 @@ const limiter = new RedisRateLimiter({
   maxInInterval: 15
 })
 
-app.get('/search/video', async ({ headers, query: { search }, error }) => {
+app.get('/search', async ({ headers, query: { search }, set, redirect, error }) => {
   const hash = Bun.hash(headers['x-userip'] || headers['cf-connecting-ip'] || '0.0.0.0')
   const isLimited = await limiter.limit(hash.toString())
-  if (isLimited) return error(429, 'error-You have been ratelimited.')
+  if (isLimited) return error(429, 'You have been ratelimited.')
 
   const videoId = validateVideo(search)
-  if (videoId) return `redirect-${process.env.FRONTEND}/watch?v=${videoId}`
+  if (videoId) return redirect(`/watch?v=${videoId}`)
+
+  const cached = await redis.get(`search:${Bun.hash(search).toString()}:html`)
+  if (cached) {
+    set.headers['Content-Type'] = 'text/html; charset=utf-8'
+    return cached
+  }
 
   const videos = await db.selectFrom('videos')
     .selectAll()
     .where('title', 'ilike', `%${search}%`)
     .execute()
 
-  return videos
+  const html = await m(eta.render('./search', { 
+    data: videos,
+    title: 'Search | PreserveTube',
+  }))
+  await redis.set(`search:${Bun.hash(search).toString()}:html`, html, 'EX', 3600)
+
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return html
 }, {
   query: t.Object({
     search: t.String()
diff --git a/src/router/transparency.ts b/src/router/transparency.ts
index fa6a5c0..974b57c 100644
--- a/src/router/transparency.ts
+++ b/src/router/transparency.ts
@@ -1,41 +1,55 @@
 import { Elysia } from 'elysia';
 
 import { db } from '@/utils/database'
+import { m, eta } from '@/utils/html'
 import redis from '@/utils/redis';
 
 const app = new Elysia()
 
-app.get('/transparency/list', async () => {
-  const cached = await redis.get('transparency')
-  if (cached) return JSON.parse(cached)
+app.get('/transparency', async ({ set }) => {
+  const cached = await redis.get('transparency:html')
+  if (cached) {
+    set.headers['Content-Type'] = 'text/html; charset=utf-8'
+    return cached
+  }
 
   const reports = await db.selectFrom('reports')
     .selectAll()
     .execute()
 
-  const json = reports.map(r => {
-    return {
-      ...r,
-      details: (r.details).split('<').join('&lt;').split('>').join('&gt;'),
-      date: (r.date).toISOString().slice(0, 10)
-    }
-  })
-
-  await redis.set('transparency', JSON.stringify(json), 'EX', 3600)
-  return json
+  const html = await m(eta.render('./transparency', { 
+    data: reports,
+    title: 'Transparency | PreserveTube',
+  }))
+  await redis.set('transparency:html', html, 'EX', 3600)
+  
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return html
 })
 
-app.get('/transparency/:id', async ({ params: { id } }) => {
-  const cached = await redis.get(`transparency:${id}`)
-  if (cached) return JSON.parse(cached)
+app.get('/transparency/:id', async ({ params: { id }, set, error }) => {
+  const cached = await redis.get(`transparency:${id}:html`)
+  if (cached) {
+    set.headers['Content-Type'] = 'text/html; charset=utf-8'
+    return cached
+  }
 
   const json = await db.selectFrom('reports')
     .selectAll()
     .where('target', '=', id)
-    .execute()
+    .executeTakeFirst()
+  if (!json) return error(404, 'Report not found.')
+  
+  const html = await m(eta.render('./transparency-entry', { 
+    title: `${json.title} | PreserveTube`,
+    t_title: json.title,
+    date: json.date.toISOString(),
+    details: json.details,
+  }))
+  await redis.set(`transparency:${id}:html`, html, 'EX', 3600)
 
-  await redis.set(`transparency:${id}`, JSON.stringify(json), 'EX', 3600)
-  return json
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return html
 })
 
 export default app
\ No newline at end of file
diff --git a/src/router/video.ts b/src/router/video.ts
index e2b9c0f..b87a282 100644
--- a/src/router/video.ts
+++ b/src/router/video.ts
@@ -4,6 +4,7 @@ import DOMPurify from 'isomorphic-dompurify'
 import { db } from '@/utils/database'
 import { getChannel, getChannelVideos } from '@/utils/metadata';
 import { convertRelativeToDate } from '@/utils/common';
+import { m, eta } from '@/utils/html'
 import redis from '@/utils/redis';
 
 const app = new Elysia()
@@ -16,6 +17,58 @@ interface processedVideo {
   deleted?: undefined;
 }
 
+app.get('/watch', async ({ query: { v }, set, redirect, error }) => {
+  if (!v) return error(404)
+
+  const cached = await redis.get(`watch:${v}:html`)
+  if (cached) {
+    set.headers['Content-Type'] = 'text/html; charset=utf-8'
+    return cached
+  }
+
+  if (!v.match(/[\w\-_]{11}/)) return error(404)
+
+  const json = await db.selectFrom('videos')
+    .selectAll()
+    .where('id', '=', v)
+    .executeTakeFirst()
+
+  if (!json) {
+    const html = await m(eta.render('./watch', { 
+      isMissing: true,
+      id: v,
+      title: 'Video Not Found | PreserveTube'
+    }))
+
+    set.headers['cache-control'] = 'public, no-cache'
+    set.headers['content-type'] = 'text/html; charset=utf-8'
+    return error(404, html)
+  }
+  if (json.disabled) return redirect(`/transparency/${v}`)
+
+  let transparency: any[] = []
+  if (json.hasBeenReported) {
+    transparency = await db.selectFrom('reports')
+      .selectAll()
+      .where('target', '=', v)
+      .execute()
+  }
+
+  const html = await m(eta.render('./watch', { 
+    transparency,
+    ...json,
+    description: DOMPurify.sanitize(json.description),
+    title: `${json.title} | PreserveTube`,
+    v_title: json.title,
+    keywords: `${json.title} video archive, ${json.title} ${json.channel} archive`,
+    manualAnalytics: true
+  }))
+  await redis.set(`watch:${v}:html`, html, 'EX', 3600)
+
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return html
+})
+
 app.get('/video/:id', async ({ params: { id }, error }) => {
   const cached = await redis.get(`video:${id}`)
   if (cached) return JSON.parse(cached)
@@ -34,16 +87,26 @@ app.get('/video/:id', async ({ params: { id }, error }) => {
   }
 })
 
-app.get('/channel/:id', async ({ params: { id }, error }) => {
-  const cached = await redis.get(`channel:${id}`)
-  if (cached) return JSON.parse(cached)
+app.get('/channel/:id', async ({ params: { id }, set }) => {
+  const cached = await redis.get(`channel:${id}:html`)
+  if (cached) {
+    set.headers['Content-Type'] = 'text/html; charset=utf-8'
+    return cached
+  }
 
   const [videos, channel] = await Promise.all([
     getChannelVideos(id),
     getChannel(id)
   ])
 
-  if (!videos || !channel || videos.error || channel.error) return error(404, { error: '404' })
+  if (!videos || !channel || videos.error || channel.error) {
+    const html = await m(eta.render('./channel', { 
+      failedToFetch: true,
+      id
+    }))
+    set.headers['Content-Type'] = 'text/html; charset=utf-8'
+    return html
+  }
 
   const archived = await db.selectFrom('videos')
     .select(['id', 'title', 'thumbnail', 'published', 'archived'])
@@ -68,20 +131,26 @@ app.get('/channel/:id', async ({ params: { id }, error }) => {
 
   processedVideos.sort((a: any, b: any) => new Date(b.published).getTime() - new Date(a.published).getTime());
 
-  const json = {
+  const html = await m(eta.render('./channel', { 
     name: channel.metadata.title,
     avatar: channel.metadata.avatar[0].url,
     verified: channel.header.author?.is_verified,
-    videos: processedVideos
-  }
-
-  await redis.set(`channel:${id}`, JSON.stringify(json), 'EX', 3600)
-  return json
+    videos: processedVideos,
+    title: `${channel.metadata.title} | PreserveTube`,
+    keywords: `${channel.metadata.title} archive, ${channel.metadata.title} channel archive, ${channel.metadata.title} deleted video, ${channel.metadata.title} video deleted`
+  }))
+  await redis.set(`channel:${id}:html`, html, 'EX', 3600)
+  
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return html
 })
 
-app.get('/channel/:id/videos', async ({ params: { id } }) => {
-  const cached = await redis.get(`channelVideos:${id}`)
-  if (cached) return JSON.parse(cached)
+app.get('/channel/:id/videos', async ({ params: { id }, set }) => {
+  const cached = await redis.get(`channelVideos:${id}:html`)
+  if (cached) {
+    set.headers['Content-Type'] = 'text/html; charset=utf-8'
+    return cached
+  }
 
   const archived = await db.selectFrom('videos')
     .select(['id', 'title', 'thumbnail', 'published', 'archived'])
@@ -89,11 +158,15 @@ app.get('/channel/:id/videos', async ({ params: { id } }) => {
     .orderBy('published desc')
     .execute()
 
-  const json = {
-    videos: archived
-  }
-  await redis.set(`channelVideos:${id}`, JSON.stringify(json), 'EX', 3600)
-  return json
+  const html = await m(eta.render('./channel-videos', { 
+    videos: archived,
+    title: `${id} videos | PreserveTube`,
+    keywords: `${id} archive, ${id} channel archive, ${id} deleted video, ${id} video deleted`
+  }))
+  await redis.set(`channelVideos:${id}:html`, html, 'EX', 3600)
+
+  set.headers['Content-Type'] = 'text/html; charset=utf-8'
+  return html
 })
 
 export default app
\ No newline at end of file
diff --git a/src/templates/abuse.eta b/src/templates/abuse.eta
new file mode 100644
index 0000000..afed0ce
--- /dev/null
+++ b/src/templates/abuse.eta
@@ -0,0 +1,67 @@
+<% layout('./layout') %>
+
+<div class="text">
+  <div class="reports">
+    When it comes to reports of child abuse, PLEASE report it to <a href="https://report.cybertip.org/">NCMEC</a> or your local law enforcement agency, who will then contact us. PreserveTube is not legally equipped to handle such reports.
+  </div>
+
+  Our top priority at PreserveTube is to provide a safe and respectful environment for all users of our service. If you come across any content on our website that you believe is inappropriate or violates our community guidelines, we urge you to report it immediately so we can take appropriate action.<br><br>
+          
+  To file an abuse report, please follow these steps:
+
+  <ol>
+    <li>Identify the content that you believe is inappropriate or in violation of our community guidelines.</li>
+    <li>Take a screenshot or copy the URL of the content for reference.</li>
+    <li>Send an email to <a href="mailto:abuse@preservetube.com">abuse@preservetube.com</a> with the subject line "Abuse Report".</li>
+    <li>In the email, please provide the following information:
+      <ul>
+        <li>Your full name and contact information.</li>
+        <li>A detailed description of the content and why you believe it is inappropriate or in violation of our community guidelines.</li>
+        <li>The screenshot or URL of the content for reference.</li>
+      </ul>
+    </li>
+  </ol>
+          
+  At Preservetube, we take a <i>Law of the Land</i> approach to content moderation. This means that we do not allow any content that is illegal or violates the laws of either The Netherlands or The United States of America.
+</div>
+
+<div class="pgp">
+  <a href="pgp.txt">Our PGP key</a> is available for secure communication.
+</div>
+
+
+<style> 
+  a {
+    font-weight: bold;
+  }
+    
+	.text {
+    margin-top: 5%;
+    margin-bottom: 5%;
+    margin-left: auto;
+    margin-right: auto;
+    width: 75%;
+  }
+
+  .pgp {
+		position: absolute;
+		margin-left: auto;
+		margin-right: auto;
+		left: 0;
+		right: 0;
+		bottom: 10px;
+		text-align: center;
+  }
+
+  .reports {
+    background-color: #ffd7cf;
+    border: 2px dashed #da7b5e;
+    padding: 10px;
+    margin-top: 5px;
+    margin-bottom: 1rem;
+  }
+    
+  h2 {
+    margin-bottom: 2px;
+  }
+</style>
diff --git a/src/templates/channel-videos.eta b/src/templates/channel-videos.eta
new file mode 100644
index 0000000..1e32330
--- /dev/null
+++ b/src/templates/channel-videos.eta
@@ -0,0 +1,76 @@
+<% layout('./layout') %>
+
+<div class="grid">
+  <% it.videos.forEach(function(v){ %>
+    <div class="video">
+      <a href="/watch?v=<%= v.id %>">
+        <img class="thumbnail" src="<%= v.thumbnail %>" />
+        <div class="title"><%= v.title %></div>
+        <div class="date">
+          Published on <%= v.published %>
+
+          <% if (v.archived) { %>
+            | Archived on <%= v.archived %>
+          <% } %>
+        </div>
+
+        <% if (v.deleted) { %>
+          <div class="deleted">(the original video has been deleted)</div>
+        <% } %>
+      </a>
+    </div>
+  <% }) %>
+</div>
+
+<style>
+  .channel {
+    margin: 0 auto;
+    display: flex;
+    place-items: center;
+    justify-content: center;
+  }
+
+  .channel img {
+    border-radius: 50%;
+    margin-right: 10px;
+    display: inline-block;
+  }
+
+  .channel h1 {
+    display: inline-block;
+  }
+
+  .verified {
+    height: 20px;
+    margin-left: 5px;
+    content: url("https://api.iconify.design/ion/checkmark-circle.svg");
+    display: inline-block;
+  }
+
+  .grid {
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 1%;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .video {
+    padding: 20px;
+  }
+
+  .video img {
+    width: 100%;
+    aspect-ratio: 16/9;
+  }
+
+  .title {
+    margin-top: 5px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .deleted {
+    font-size: 12px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/templates/channel.eta b/src/templates/channel.eta
new file mode 100644
index 0000000..bd42f89
--- /dev/null
+++ b/src/templates/channel.eta
@@ -0,0 +1,92 @@
+<% layout('./layout') %>
+
+<% if (it.failedToFetch) { %>
+  <div class="channel">
+    <h2>
+      An error occurred while attempting to retrieve this channel from YouTube. <br/>
+      To access all videos without relying on YouTube data, please <a href="/channel/<%= it.id %>/videos">click here</a>. 
+    </h2>
+  </div>
+<% } else { %>
+  <div class="channel">
+    <img src="<%= it.avatar %>" />
+    <h1><%= it.name %></h1>
+  </div>
+
+  <div class="grid">
+    <% it.videos.forEach(function(v){ %>
+      <div class="video">
+        <a href="/watch?v=<%= v.id %>">
+          <img class="thumbnail" src="<%= v.thumbnail %>" />
+          <div class="title"><%= v.title %></div>
+          <div class="date">
+            Published on <%= v.published %>
+
+            <% if (v.archived) { %>
+              | Archived on <%= v.archived %>
+            <% } %>
+          </div>
+
+          <% if (v.deleted) { %>
+            <div class="deleted">(the original video has been deleted)</div>
+          <% } %>
+        </a>
+      </div>
+    <% }) %>
+  </div>
+<% } %>
+
+<style>
+  .channel {
+    margin: 0 auto;
+    display: flex;
+    place-items: center;
+    justify-content: center;
+  }
+
+  .channel img {
+    border-radius: 50%;
+    margin-right: 10px;
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+  }
+
+  .channel h1 {
+    display: inline-block;
+  }
+
+  .verified {
+    height: 20px;
+    margin-left: 5px;
+    content: url("https://api.iconify.design/ion/checkmark-circle.svg");
+    display: inline-block;
+  }
+
+  .grid {
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 1%;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .video {
+    padding: 20px;
+  }
+
+  .video img {
+    width: 100%;
+    aspect-ratio: 16/9;
+  }
+
+  .title {
+    margin-top: 5px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .deleted {
+    font-size: 12px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/templates/dmca.eta b/src/templates/dmca.eta
new file mode 100644
index 0000000..4b4940b
--- /dev/null
+++ b/src/templates/dmca.eta
@@ -0,0 +1,51 @@
+<% layout('./layout') %>
+
+<div class="text">
+  To submit a DMCA takedown notice, please send an email to <a href="mailto:legal@preservetube.com">legal@preservetube.com</a> that includes the following information:
+  <ul>
+      <li>Identification of the copyrighted work that you claim has been infringed, or if multiple copyrighted works are covered by a single notification, provide a representative list of such works.</li>
+      <li>Identification of the material that you claim is infringing and information reasonably sufficient to permit us to locate the material, including the URL(s) where the infringing material is located on PreserveTube.</li>
+      <li>Your contact information, including your full legal name, mailing address, telephone number, and email address.</li>
+      <li>A statement that you have a good faith belief that the use of the copyrighted materials described above and contained on the service is not authorized by the copyright owner, its agent, or by law.</li>
+      <li>A statement that you hereby declare, under penalty of perjury, that the information in your notification is accurate and that you are the owner of the copyright or other intellectual property interest, or authorized to act on behalf of the owner of the copyright or other intellectual property interest.</li>
+      <li>An electronic or physical signature of the person authorized to act on behalf of the owner of the copyright or other intellectual property interest.</li>
+  </ul>
+
+  If we receive a valid DMCA takedown notice, we will add a notice to the video page indicating that the content has been stricken with a copyright claim. This notice will include the name of the person or entity that sent the copyright notice and the email logs associated with the notice. If the video is obviously copyrighted content, such as a movie or TV show, it will be taken down. Any other videos will remain online.<br><br>
+  Please note that submitting a false or misleading DMCA takedown notice may result in legal consequences. If you are unsure whether your copyrighted material has been infringed or if you need legal advice, we recommend that you consult with an attorney.<br><br>
+  P.S.: A DMCA takedown notice will not remove embarrassing videos that Preservetube has archived from the internet. We will ensure that the videos remain accessible to the public, even if that's not possible via our website.<br><br>
+
+  If you have any questions about this DMCA policy, please contact <a href="mailto:legal@preservetube.com">legal@preservetube.com</a>.
+</div>
+
+<div class="pgp">
+  <a href="pgp.txt">Our PGP key</a> is available for secure communication.
+</div>
+
+<style> 
+  a {
+    font-weight: bold;
+  }
+    
+	.text {
+    margin-top: 5%;
+    margin-bottom: 5%;
+    margin-left: auto;
+    margin-right: auto;
+    width: 75%;
+  }
+
+  .pgp {
+		position: absolute;
+		margin-left: auto;
+		margin-right: auto;
+		left: 0;
+		right: 0;
+		bottom: 10px;
+		text-align: center;
+  }
+
+  h2 {
+    margin-bottom: 2px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/templates/donate.eta b/src/templates/donate.eta
new file mode 100644
index 0000000..e976c72
--- /dev/null
+++ b/src/templates/donate.eta
@@ -0,0 +1,49 @@
+<% layout('./layout') %>
+
+<div class="text">
+  Infrastructure costs money, and running PreserveTube costs $1,185 a year. If you love what we do, a little support would go a long way in keeping us safe and sound!
+  
+  <h3>FIAT Donations</h3>
+  <p>
+    Unfortunately, PreserveTube only accepts cryptocurrency donations at this time. 
+    Feeling extra generous? You can learn how to purchase Bitcoin here: <a style="font-weight: bold;" href="https://buybitcoinworldwide.com">buybitcoinworldwide.com</a>.
+  </p>
+
+  <h3>Cryptocurrency Donations</h3>
+  <p>We accept the following cryptocurrencies to support our cause:</p>
+  <p>
+    <span class="label">BTC</span>: <code>bc1qfa6uqp72a2hgg3ac06f2du2cvug4hadufd7sql</code><br>
+    <span class="label">ETH</span>: <code>0xF6923d9e17B32efF1D82200E82E3b9f500c6fAED</code><br>
+    <span class="label">LTC</span>: <code>LW7qhYnAfjqieNdySNeURhrpCzcCjcuj7U</code> <br>
+    <span class="label">SOL</span>: <code>GK5WTtJeZRuJheSbm2ZFYWHQ3QfZPgLaZ1Vq5EXi3e91</code> <br>
+    <span class="label">XMR</span>: <code>8BqeuL5iRzXccqc8wy8U2RgJF7RdTX52Pgpdc6QYcrHfLnoK9jtQ3MrDv7V6T14hHjMHfE28wsVqhCGiCeXsRF4651SnGNC</code>  <br><br>
+    <span class="label">Or anything else:</span> <br>
+    <iframe src="https://trocador.app/anonpay/?ticker_to=xmr&network_to=Mainnet&address=8BqeuL5iRzXccqc8wy8U2RgJF7RdTX52Pgpdc6QYcrHfLnoK9jtQ3MrDv7V6T14hHjMHfE28wsVqhCGiCeXsRF4651SnGNC&donation=True&simple_mode=True&ticker_from=doge&network_from=Mainnet&bgcolor=" width="310" height="230" style="border:0" scrolling="no"></iframe>
+  </p>
+</div>
+
+<style>
+  .text {
+    margin-top: 5%;
+    margin-bottom: 5%;
+    margin-left: auto;
+    margin-right: auto;
+    width: 75%;
+  }
+
+  @media screen and (max-width: 768px) {
+    .text {
+      width: 90%;
+    }
+  }
+
+  .label {
+    font-weight: bold;
+  }
+
+  code {
+    word-break: break-all;
+    user-select: all;
+    -webkit-user-select: all;
+  }
+</style>
diff --git a/src/templates/index.eta b/src/templates/index.eta
new file mode 100644
index 0000000..29b32a5
--- /dev/null
+++ b/src/templates/index.eta
@@ -0,0 +1,225 @@
+<% layout('./layout') %>
+
+<div class="container">
+  <form class="archive" action="save">
+    <div class="title">Archive a Youtube Video</div>
+
+    <input
+      class="url"
+      name="url"
+      type="text"
+      placeholder="https://www.youtube.com/watch?v=smVU37xAhY8"
+      tabindex="1"
+      required
+    />
+    <input class="submit" type="submit" value="save" tabindex="-1" />
+  </form>
+
+  <!-- <form class="playlist" action="saveplaylist">
+    <div class="title">Archive a Youtube Playlist</div>
+
+    <input
+      class="url"
+      name="url"
+      type="text"
+      placeholder="https://www.youtube.com/playlist?list=PLhixgUqwRTjwvBI-hmbZ2rpkAl4lutnJG"
+      tabindex="1"
+      required
+    />
+    <input class="submit" type="submit" value="save" tabindex="-1" />
+  </form> -->
+
+  <form class="channel" action="savechannel">
+    <div class="title">Archive a Youtube Channel</div>
+
+    <input
+      class="url"
+      name="url"
+      type="text"
+      placeholder="https://www.youtube.com/channel/UCyjKBSGMcxdGbSD86iq_SBw"
+      tabindex="1"
+      required
+    />
+    <input class="submit" type="submit" value="save" tabindex="-1" />
+  </form>
+
+  <!-- <form class="channel" action="autodownload">
+    <div class="title">
+      Automatically download new videos from channel
+    </div>
+
+    <input
+      class="url"
+      name="url"
+      type="text"
+      placeholder="https://www.youtube.com/channel/UCyjKBSGMcxdGbSD86iq_SBw"
+      tabindex="1"
+      required
+    />
+    <input class="submit" type="submit" value="save" tabindex="-1" />
+  </form> -->
+
+  <div class="about">
+    PreserveTube is a time capsule for YouTube videos! It allows you to
+    "preserve" any YouTube video, creating a snapshot that will always
+    be available even if the original video disappears or is taken down. <br
+    /><br />
+    It saves not only the original video, but also descriptions, titles and
+    other interesting metadata.<br /><br /><br />
+
+    PreserveTube is dedicated to preserving the legacy of YouTube, one
+    video at a time.
+  </div>
+
+  <form class="search" action="/search">
+    <div class="title">Search for the archive of an Youtube Video</div>
+
+    <input
+      class="url"
+      name="search"
+      type="text"
+      placeholder="The Chris Chan Interview or https://www.youtube.com/watch?v=mA80W7qVcSM"
+      tabindex="1"
+      required
+    />
+    <input class="submit" type="submit" value="search" tabindex="-1" />
+  </form>
+
+  <!-- <form class="search" action={`${backend}/search/playlist`}>
+    <div class="title">
+      Search for the archive of an Youtube Playlist
+    </div>
+
+    <input
+      class="url"
+      name="url"
+      type="text"
+      placeholder="https://www.youtube.com/playlist?list=PLhixgUqwRTjwvBI-hmbZ2rpkAl4lutnJG"
+      tabindex="1"
+      required
+    />
+    <input class="submit" type="submit" value="search" tabindex="-1" />
+  </form> -->
+
+  <form class="search" action="/search/channel">
+    <div class="title">
+      Search for the archive of an Youtube Channel
+    </div>
+
+    <input
+      class="url"
+      name="url"
+      type="text"
+      placeholder="https://www.youtube.com/channel/UCyjKBSGMcxdGbSD86iq_SBw"
+      tabindex="1"
+      required
+    />
+    <input class="submit" type="submit" value="search" tabindex="-1" />
+  </form>
+</div>
+
+<div class="footer">
+  <a href="transparency">[TRANSPARENCY]</a><div class="space"></div>
+  <a href="dmca">[DMCA]</a><div class="space"></div>
+  <a href="abuse">[REPORT ABUSE]</a><div class="space"></div>
+  <a href="privacy">[PRIVACY POLICY]</a><div class="space"></div>
+  <a href="https://status.preservetube.com">[STATUS]</a><div class="space"></div>
+  <a href="https://github.com/PreserveTube">[GITHUB]</a>
+</div>
+
+
+<style>
+	form {
+		margin-left: auto;
+		margin-right: auto;
+		padding-top: 5px;
+		padding-left: 10px;
+		padding-right: 10px;
+		padding-bottom: 10px;
+		background-color: #515359;
+		color: white;
+		width: 50%;
+	}
+
+	.title {
+		font-weight: bold;
+		font-size: 16px;
+	}
+
+	.archive {
+		margin-top: 2%;
+	}
+
+	.playlist,
+	.channel {
+		margin-top: 20px;
+	}
+
+	.url {
+		width: 85%;
+		display: inline-block;
+	}
+
+	.submit {
+		width: 13%;
+		display: inline-block;
+	}
+
+	.search {
+		margin-top: 20px;
+	}
+
+	.about {
+		margin-top: 2%;
+		margin-bottom: 2%;
+		margin-left: auto;
+		margin-right: auto;
+		width: 50%;
+	}
+
+	.footer {
+		position: fixed;
+		color: white;
+		background-color: #1b1c1f;
+		margin-left: auto;
+		margin-right: auto;
+		left: 0;
+		right: 0;
+		padding-top: 5px;
+		padding-bottom: 5px;
+		bottom: 0px;
+		text-align: center;
+		display: inline-block;
+	}
+
+	.container {
+		padding-bottom: 50px;
+	}
+
+	@media only screen and (max-width: 768px) {
+		form {
+			width: 85%;
+		}
+
+		.url {
+			width: 80%;
+		}
+
+		.submit {
+			width: 15%;
+		}
+
+		.about {
+			width: 85%;
+		}
+
+		.footer {
+			display: none;
+		}
+	}
+
+	.space {
+		display: inline-block;
+		width: 3%;
+	}
+</style>
\ No newline at end of file
diff --git a/src/templates/latest.eta b/src/templates/latest.eta
new file mode 100644
index 0000000..4fcff94
--- /dev/null
+++ b/src/templates/latest.eta
@@ -0,0 +1,80 @@
+<% layout('./layout') %>
+
+<div class="grid">
+  <% it.data.forEach(function(v){ %>
+    <div class="video">
+      <a href="/watch?v=<%= v.id %>">
+        <img class="thumbnail" src="<%= v.thumbnail %>" />
+        <div class="title"><%= v.title %></div>
+        <div class="date">Published on <%= v.published %> | Archived on <%= v.archived %></div>
+      </a>
+      <div class="channel-profile">
+        <img src="<%= v.channelAvatar %>" />
+        <span class="channel-name">
+          <a href="/channel/<%= v.channelId %>">
+            <%= v.channel %> 
+            <% if (it.channelVerified) { %>
+              <div class="verified"></div>
+            <% } %>
+          </a>
+        </span>
+      </div>
+    </div>
+  <% }) %>
+</div>
+
+<style>
+  .grid {
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 1%;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  
+  @media screen and (max-width: 768px) {
+    .grid {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+
+  .video {
+    padding: 20px;
+  }
+
+  .video img {
+    width: 100%;
+    aspect-ratio: 16/9;
+  }
+
+  .title {
+    margin-top: 5px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .channel-profile {
+    margin-top: 2px;
+    display: flex;
+    align-items: center;
+  }
+
+  .channel-profile img {
+    border-radius: 50%;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+  }
+
+  .channel-name {
+    padding-left: 10px;
+    font-size: 15px;
+  }
+
+  .verified {
+    height: 12px;
+    margin-left: 2px;
+    content: url('https://api.iconify.design/ion/checkmark-circle.svg');
+    display: inline-block;
+  }
+</style>
diff --git a/src/templates/layout.eta b/src/templates/layout.eta
new file mode 100644
index 0000000..e7cf017
--- /dev/null
+++ b/src/templates/layout.eta
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<% if (it.keywords) { %>
+			<meta name="keywords" content="<%= it.keywords %>"/>
+    <% } %>
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+		<meta property="og:title" content="<%= it.title %>"/>
+		<% if (it.description) { %>
+			<meta name="og:description" content="<%= it.description %>">
+    <% } else { %>
+			<meta name="og:description" content="PreserveTube is a time capsule for YouTube videos! It allows you to preserve any YouTube video, creating a snapshot that will always be available even if the original video disappears or is taken down.">
+		<% } %>
+		<meta property="og:type" content="website"/>
+		<meta property="og:url" content="https://preservetube.com"/>
+		<meta property="og:site_name" content="PreserveTube"/>
+	  
+		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:title" content="<%= it.title %>">
+		<% if (it.description) { %>
+			<meta name="twitter:description" content="<%= it.description %>">
+    <% } else { %>
+			<meta name="twitter:description" content="PreserveTube is a time capsule for YouTube videos! It allows you to preserve any YouTube video, creating a snapshot that will always be available even if the original video disappears or is taken down.">
+		<% } %>
+	  
+		<link href="https://cdn.jsdelivr.net/gh/preservetube/fonts@main/fonts.css" rel="stylesheet" type="text/css">
+		
+		<% if (it.manualAnalytics) { %>
+			<script defer data-domain="preservetube.com" src="https://a.gloe.net/js/script.manual.js"></script>
+			<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+			<script>
+				function prepareUrl(params) {
+					const url = new URL(location.href);
+					return params.reduce((customUrl, param) => {
+						const value = url.searchParams.get(param);
+						return value ? `${customUrl}/${value}` : customUrl;
+					}, `${url.origin}${url.pathname.replace(/\/$/, '')}`);
+				}
+				plausible('pageview', { u: prepareUrl(["v"]) + window.location.search });
+			</script>
+    <% } else { %>
+			<script defer data-domain="preservetube.com" src="https://a.gloe.net/js/script.js"></script>
+		<% } %>
+
+		<title><%= it.title %></title>
+	</head>
+	<body>
+		<div class="header">
+			<div class="logo">
+				<a href="/">PreserveTube</a>
+			</div>
+			|
+			<div class="buttons">
+				<a href="/latest">Latest</a>
+			</div>
+		</div>
+		<div class="donate">
+			<span>PreserveTube is dedicated to preserving internet history, and we need your help! Every donation, big or small, makes a difference.</span>
+			<a href="/donate" style="font-weight: bold;">Donate now.</a>
+		</div>
+		<main>
+			<%~ it.body %>
+		</main>
+		<footer>
+			page rendered by <code><%= hostname %></code>
+		</footer>
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+		background-color: #fffeff;
+		font-family: "Proxima Nova", sans-serif;
+	}
+
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.header {
+		position: relative;
+		background-color: #1b1c1f;
+		color: white;
+		height: 30px;
+		padding-top: 5px;
+		padding-left: 17.5%;
+		padding-right: 17.5%;
+	}
+
+	.donate {
+		position: relative;
+		background-color: #fff2cf;
+		border-bottom: 2px dashed #dab75e;
+		padding-top: 5px;
+		padding-bottom: 5px;
+		text-align: center;
+	}
+
+	@media (max-width: 1100px) {
+		.donate {
+			padding-left: 5%;
+			padding-right: 5%;
+		}
+	}
+
+	.logo {
+		padding-right: 12px;
+		font-size: 20px;
+		font-weight: bold;
+		display: inline-block;
+	}
+
+	.buttons {
+		padding-left: 12px;
+		font-size: 15px;
+		display: inline-block;
+	}
+
+	@media only screen and (max-width: 767px) {
+		.header {
+			padding-left: 5%;
+			padding-right: 5%;
+		}
+	}
+
+	footer {
+		padding: 10px;
+		text-align: center;
+		font-size: 12px;
+		color: gray;
+	}
+
+	footer > code {
+		padding: 2px 4px;
+		font-size: 12px;
+	}
+</style>
diff --git a/src/templates/privacy.eta b/src/templates/privacy.eta
new file mode 100644
index 0000000..19dbcab
--- /dev/null
+++ b/src/templates/privacy.eta
@@ -0,0 +1,61 @@
+<% layout('./layout') %>
+
+<div class="text">
+  <div class="part">
+    <strong>Last updated:</strong> 2025-08-16
+  </div>
+
+  <div class="part">
+    <div class="title">Anonymous Analytics</div>
+    PreserveTube uses <a href="https://plausible.io/">Plausible</a> to get an aproximate number of active users, and the most watched videos. 
+    No identifiable information, such as IPs, is stored. This Plausible instance is selfhosted, and not proxied through Cloudflare.
+    <br><br>
+
+    <div class="title">Reverse Proxying</div>
+    We use <a href="https://caddyserver.com/">Caddy</a> to reverse proxy our services. On certain ocassions, such as when errors occur in requests,
+    Caddy might log these. These logs include headers, client IPs, and paths. Otherwise, our Caddy setup does not log any requests. <br><br>
+    Logs are purged automatically once the file size reaches 50MB.
+    <br><br>
+
+    <div class="title">DDoS Protection</div>
+    We use a combination of Cloudflare (preservetube.com), BasedFlare (preservetube.net), and selfhosted solutions (preservetube.org) for our DDoS protection. We additionally use Cloudflare Turnstile as a captcha
+    to avoid automated bot traffic on the /save page. <br><br>
+    Cloudflare's privacy policy can be found here: <a href="https://www.cloudflare.com/en-gb/privacypolicy/">https://www.cloudflare.com/en-gb/privacypolicy/</a>. <br>
+    BasedFlare has no privacy policy. It should be assumed everything is logged. Avoid visiting preservetube.net if you're uncomfortable with this.
+    <br><br>
+
+    <div class="title">DNS</div>
+    Besides Cloudflare and BasedFlare, PreserveTube also relies on ClouDNS for DNS services. ClouDNS's privacy policy can be found here: <a href="https://www.cloudns.net/privacy-policy/">https://www.cloudns.net/privacy-policy/</a>
+    <br><br>
+
+    <div class="title">Video Saving</div>
+    Saving videos is completly anonymous. We do not log who saved a video.
+    <br><br>
+
+    <div class="title">Questions?</div>
+    I'm reachable at <a href="mailto:admin@preservetube.com">admin@preservetube.com</a> (<a style="text-decoration: none;" href="/pgp.txt">🔑</a>).
+  </div>
+</div>
+
+<style>
+  a {
+    text-decoration: underline;
+  }
+    
+	.text {
+    margin-top: 2%;
+    margin-left: auto;
+    margin-right: auto;
+    width: 65%;
+  }
+
+  .part {
+    margin-bottom: 3%;
+  }
+
+  .title {
+    font-size: large;
+    margin-bottom: 2px;
+    font-weight: bold;
+  }
+</style>
\ No newline at end of file
diff --git a/src/templates/save.eta b/src/templates/save.eta
new file mode 100644
index 0000000..c8eab24
--- /dev/null
+++ b/src/templates/save.eta
@@ -0,0 +1,57 @@
+<% layout('./layout') %>
+
+<div id="logs" class="logs">
+  <h1 id="title"></h1>
+  <div class="captcha" id="captcha"></div>
+  <h3 id="bottom">
+    <noscript>This feature doesen't function properly unless JavaScript is enabled.</noscript>
+  </h3>
+</div>
+
+<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+<script>
+  const url = "<%= it.url %>"
+  const websocket = "<%= it.websocket %>"
+  const sitekey = "<%= it.sitekey %>"
+  const ws = new WebSocket(`${websocket}/save?url=${encodeURIComponent(url)}`)
+  const h1 = document.getElementById("title")
+  const h3 = document.getElementById("bottom")
+  const captcha = document.getElementById("captcha")
+
+  ws.onmessage = function (msg) {
+    const text = msg.data.split(' - ').slice(1).join(' - ')
+
+    if (msg.data == 'ERROR - Missing URL' || msg.data == 'ERROR - Whoops! What is that? That is not a Youtube url.') {
+      h1.innerHTML = text
+      return
+    } else if (msg.data.startsWith('CAPTCHA -')) {
+      captcha.style.display = 'block'
+      turnstile.render('#captcha', {
+        sitekey: sitekey,
+        callback: function(token) {
+          captcha.remove()
+          ws.send(token)
+        },
+      })
+    } else if (msg.data.startsWith('DONE -')) {
+      window.location.href = text
+    }
+
+    h3.innerHTML = `${h1.innerHTML}<br>${h3.innerHTML}`
+    h1.innerHTML = text
+  }
+
+  ws.onclose = function (event) {
+    h3.innerHTML = `Websocket connection was closed: ${event.reason} (${event.code})<br>${h3.innerHTML}`
+  } 
+
+  setInterval(() => {
+    ws.send('alive')
+  }, 2000)
+</script>
+
+<style>
+  .logs {
+    text-align: center;
+  }
+</style>
\ No newline at end of file
diff --git a/src/templates/savechannel.eta b/src/templates/savechannel.eta
new file mode 100644
index 0000000..997b100
--- /dev/null
+++ b/src/templates/savechannel.eta
@@ -0,0 +1,57 @@
+<% layout('./layout') %>
+
+<div id="logs" class="logs">
+  <h1 id="title"></h1>
+  <div class="captcha" id="captcha"></div>
+  <h3 id="bottom">
+    <noscript>This feature doesen't function properly unless JavaScript is enabled.</noscript>
+  </h3>
+</div>
+
+<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+<script>
+  const url = "<%= it.url %>"
+  const websocket = "<%= it.websocket %>"
+  const sitekey = "<%= it.sitekey %>"
+  const ws = new WebSocket(`${websocket}/savechannel?url=${encodeURIComponent(url)}`)
+  const h1 = document.getElementById("title")
+  const h3 = document.getElementById("bottom")
+  const captcha = document.getElementById("captcha")
+
+  ws.onmessage = function (msg) {
+    const text = msg.data.split(' - ').slice(1).join(' - ')
+
+    if (msg.data == 'ERROR - Missing URL' || msg.data == 'ERROR - Whoops! What is that? That is not a Youtube url.') {
+      h1.innerHTML = text
+      return
+    } else if (msg.data.startsWith('CAPTCHA -')) {
+      captcha.style.display = 'block'
+      turnstile.render('#captcha', {
+        sitekey: sitekey,
+        callback: function(token) {
+          captcha.remove()
+          ws.send(token)
+        },
+      })
+    } else if (msg.data.startsWith('DONE -')) {
+      window.location.href = text
+    }
+
+    h3.innerHTML = `${h1.innerHTML}<br>${h3.innerHTML}`
+    h1.innerHTML = text
+  }
+
+  ws.onclose = function (event) {
+    h3.innerHTML = `Websocket connection was closed: ${event.reason} (${event.code})<br>${h3.innerHTML}`
+  } 
+
+  setInterval(() => {
+    ws.send('alive')
+  }, 2000)
+</script>
+
+<style>
+  .logs {
+    text-align: center;
+  }
+</style>
\ No newline at end of file
diff --git a/src/templates/search.eta b/src/templates/search.eta
new file mode 100644
index 0000000..25d0f10
--- /dev/null
+++ b/src/templates/search.eta
@@ -0,0 +1,74 @@
+<% layout('./layout') %>
+
+<div class="grid">
+  <% it.data.forEach(function(v){ %>
+    <div class="video">
+      <a href="/watch?v=<%= v.id %>">
+        <img class="thumbnail" src="<%= v.thumbnail %>" />
+        <div class="title"><%= v.title %></div>
+        <div class="date">Published on <%= v.published %> | Archived on <%= v.archived %></div>
+      </a>
+      <div class="channel-profile">
+        <img src="<%= v.channelAvatar %>" />
+        <span class="channel-name">
+          <a href="/channel/<%= v.channelId %>">
+            <%= v.channel %> 
+            <% if (it.channelVerified) { %>
+              <div class="verified"></div>
+            <% } %>
+          </a>
+        </span>
+      </div>
+    </div>
+  <% }) %>
+</div>
+
+<style>
+  .grid {
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 1%;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .video {
+    padding: 20px;
+  }
+
+  .video img {
+    width: 100%;
+    aspect-ratio: 16/9;
+  }
+
+  .title {
+    margin-top: 5px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .channel-profile {
+    margin-top: 2px;
+    display: flex;
+    align-items: center;
+  }
+
+  .channel-profile img {
+    border-radius: 50%;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+  }
+
+  .channel-name {
+    padding-left: 10px;
+    font-size: 15px;
+  }
+
+  .verified {
+    height: 12px;
+    margin-left: 2px;
+    content: url("https://api.iconify.design/ion/checkmark-circle.svg");
+    display: inline-block;
+  }
+</style>
\ No newline at end of file
diff --git a/src/templates/transparency-entry.eta b/src/templates/transparency-entry.eta
new file mode 100644
index 0000000..b3a6f47
--- /dev/null
+++ b/src/templates/transparency-entry.eta
@@ -0,0 +1,46 @@
+<% layout('./layout') %>
+
+<div class="report">
+  <div class="t-header">
+    <div class="title"><%= it.t_title %></div>
+    <div class="date"><%= it.date %></div>
+  </div>
+  <pre class="details"><%= it.details %></pre>
+</div>
+
+<style> 
+  .report {
+    margin-top: 5%;
+    margin-left: auto;
+    margin-right: auto;
+    width: 75%;
+  }
+
+  .t-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .title {
+    font-size: 25px;
+    font-weight: bold;
+    text-align: left;
+  }
+
+  .date {
+    font-size: 15px;
+    text-align: right;
+  }
+
+  .details {
+    margin-top: 10px;
+    width: 100%;
+    font-family: monospace;
+    font-size: 14px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    border: 1px solid #ccc;
+    padding: 8px;
+  }
+</style>
diff --git a/src/templates/transparency.eta b/src/templates/transparency.eta
new file mode 100644
index 0000000..c8bfabf
--- /dev/null
+++ b/src/templates/transparency.eta
@@ -0,0 +1,21 @@
+<% layout('./layout') %>
+
+<div class="grid">
+  <% it.data.forEach(function(r){ %>
+    <a class="title" href="/transparency/<%= r.target %>"><%= r.title %></a>
+  <% }) %>
+</div>
+
+<style> 
+  .grid { 
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .title {
+    font-size: larger;
+    font-weight: 600;
+    display: inline-block;
+  }
+</style>
\ No newline at end of file
diff --git a/src/templates/watch.eta b/src/templates/watch.eta
new file mode 100644
index 0000000..c8c50b2
--- /dev/null
+++ b/src/templates/watch.eta
@@ -0,0 +1,268 @@
+<% layout('./layout') %>
+
+<% if (it.isMissing) { %>
+  <div class="error">
+    <h2>Archive not found</h2>
+    <button onclick="window.location.href='/save?url=${encodeURIComponent(`https://www.youtube.com/watch?v=<%= it.id %>`)}'">
+      Archive Me!
+    </button>
+  </div>
+<% } else { %>
+  <div class="content-wrapper">
+    <div class="main-content">
+      <div class="report">
+        <a href="abuse">[report abuse]</a>
+        <div class="space"></div>
+        <a href="dmca">[dmca]</a>
+      </div>
+      
+      <% if (it.transparency.length != 0) { %>
+        <div class="reports">
+          <span class="reports-title">Somebody has complained about this video...</span> <br/>
+          <% it.transparency.forEach(function(t){ %>
+            <a href="<%= t.details %>"><%= t.title %></a>
+          <% }) %>
+        </div>
+      <% } %>
+    
+      <div class="video-wrapper">
+        <div class="video-loading hidden" id="video-loading">Loading...</div>
+        <video id="video-player" src="<%= it.source %>" poster="<%= it.thumbnail %>" controls preload="metadata"></video>
+      </div>
+      <h1><%= it.v_title %></h1>
+    
+      <div class="channel-profile">
+        <img src="<%= it.channelAvatar %>" />
+        <span class="channel-name">
+          <a href="/channel/<%= it.channelId %>">
+            <%= it.channel %> 
+            <% if (it.channelVerified) { %>
+              <div class="verified"></div>
+            <% } %>
+          </a>
+        </span>
+      </div>
+    
+      <div class="metadata">
+        <p class="date">
+          Published on <%= it.published %>  | Archived on <%= it.archived %> 
+          <a href="<%= it.source %>" target="_blank">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+            </svg>
+          </a>
+        </p>
+        <p class="description"><%~ it.description %></p>
+      </div>
+    </div>
+  </div>
+<% } %>
+
+<style>
+  .content-wrapper {
+    position: relative;
+    min-height: 100vh;
+  }
+
+  .main-content {
+    width: 65%;
+    margin: 0 auto;
+  }
+
+  .icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: 0.5em;
+  }
+
+  .report {
+    text-align: right;
+    margin-top: 5px;
+  }
+
+  .space {
+    display: inline-block;
+    width: 0.5%;
+  }
+
+  video {
+    width: 100%;
+    max-height: 720px;
+    display: block;
+    margin-top: 5px;
+  }
+
+  h1 {
+    position: relative;
+    margin: 1rem 0;
+  }
+
+  .error {
+    text-align: center;
+  }
+
+  .error h2 {
+    font-size: 30px;
+    display: flex;
+    place-items: center;
+    justify-content: center;
+  }
+
+  .channel-profile {
+    display: flex;
+    align-items: center;
+  }
+
+  .channel-profile img {
+    border-radius: 50%;
+    display: inline-block;
+    width: 3em;
+    height: 3em;
+  }
+
+  .channel-name {
+    padding-left: 10px;
+    font-size: 1.2em;
+  }
+
+  .date {
+    font-size: 17px;
+    font-weight: bold;
+    display: flex;
+  }
+
+  .description {
+    margin-top: 1rem;
+  }
+
+  .verified {
+    height: 15px;
+    content: url('https://api.iconify.design/ion/checkmark-circle.svg');
+    display: inline-block;
+  }
+
+  .reports {
+    background-color: #fff2cf;
+    border: 2px dashed #dab75e;
+    padding: 10px;
+    margin-top: 5px;
+    margin-bottom: 1rem;
+  }
+
+  .reports-title {
+    font-size: large;
+    font-weight: 600;
+  }
+
+  .video-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    max-height: 720px;
+  }
+
+  .video-wrapper video {
+    width: 100%;
+    max-height: 720px;
+    display: block;
+  }
+
+  .video-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: white;
+    font-size: 1em;
+    padding: 6px 10px;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    border-radius: 0;
+    z-index: 2;
+    transition: opacity 0.3s ease;
+    font-size: large;
+    max-width: 500px;
+  }
+
+  .video-loading.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media (max-width: 1100px) {
+    h1 {
+    font-size: 1.65em;
+    }
+
+    .date {
+    font-size: 1em;
+    }
+
+    .channel-name {
+    font-size: 1em
+    }
+
+    .icon {
+    display: none;
+    }
+
+    .channel-profile img {
+    width: 2.5em;
+    height: 2.5em;
+    }
+    .main-content {
+      width: 90%
+    }
+  }
+</style>
+<script is:inline>
+  function initVideoLoading() {
+    const video = document.getElementById('video-player');
+    const loading = document.getElementById('video-loading');
+    if (!video || !loading) return;
+    loading?.classList.remove("hidden");
+
+    const hide = () => {
+      if (!loading.classList.contains('hidden')) {
+        loading.classList.add('hidden');
+        loading.addEventListener('transitionend', () => loading.remove(), { once: true });
+      }
+    };
+
+    // bunch of events that show readyness
+    ['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'play'].forEach(evt =>
+      video.addEventListener(evt, hide)
+    );
+
+    // weird firefox something
+    video.addEventListener('click', hide);
+    video.addEventListener('keydown', hide);
+    video.addEventListener('pointerdown', hide);
+
+    video.addEventListener('error', () => {
+      loading.innerHTML = 'Video failed to load.';
+      loading.innerHTML += '<p style="font-size: medium;">This is not supposed to happen. Please email me at admin@preservetube.com with as much debugging information.</p>' + 
+        '<p style="font-size: medium;">Please include your browser console logs. <a style="font-style: italic;" href="https://support.happyfox.com/kb/article/882-accessing-the-browser-console-and-network-logs/">' + 
+        'See here on how to access them.</a> Please note you might have to refresh the page for anything to show up.</p>'
+    });
+
+    // video already has data (i.e. cached)
+    if (video.readyState > 0) hide();
+
+    // add an extra message after 10s
+    const FALLBACK_MS = 10000;
+    const fallbackTimer = setTimeout(() => {
+      if (!loading.classList.contains('hidden')) {
+        loading.innerHTML = 'Taking longer than usual to load...';
+        loading.innerHTML += '<p style="font-size: medium;">This might be due one of multiple reasons:</p>'
+          + '<ol style="font-size: medium;"><li>This video is large. Depending on your browser, it might try loading the full thing at one time, which will slow things down.</li>'
+          + '<li>Preservetube servers are overloaded. This happens once in a while, please be patient.</li><li>You\'re in an unfavourable region, which has a bad connection to our servers.</li></ol>'
+					+ '<p style="font-size: medium;">If this takes an unusual amount of time, even after considering the above mentioned reasons, please email me at admin@preservetube.com. Don\'t forget to include your aproximate region, your browser and OS.</p>'; 
+      }
+    }, FALLBACK_MS);
+
+    // clear fallback once overlay removed
+    loading.addEventListener('transitionend', () => clearTimeout(fallbackTimer), { once: true });
+  }
+
+  initVideoLoading();
+</script>
\ No newline at end of file
diff --git a/src/utils/html.ts b/src/utils/html.ts
new file mode 100644
index 0000000..c00f301
--- /dev/null
+++ b/src/utils/html.ts
@@ -0,0 +1,13 @@
+import { minify } from 'html-minifier-next';
+import { Eta } from 'eta';
+import path from 'path';
+
+export const m = async (html: string) => {
+  return await minify(html, {
+    collapseWhitespace: true,
+    removeComments: true,
+    minifyCSS: true
+  })
+}
+
+export const eta = new Eta({ views: path.join(__dirname, '../templates'), functionHeader: `const hostname = "${process.env.SERVER_NICKNAME}"` })
\ No newline at end of file