From 94009fb08ea5fd15fb80ed0cae32d8b26b81e703 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:06:46 +0100
Subject: [PATCH] feat(templates): Add port templates

---
 src/routes/port.ts       | 11 +++--
 src/utils/renderer.ts    |  2 +-
 templates/base.html.njk  |  5 +++
 templates/index.html.njk |  5 ---
 templates/port.html.njk  | 96 ++++++++++++++++++++++++++++++++++++++++
 templates/port.txt.njk   |  1 +
 6 files changed, 111 insertions(+), 9 deletions(-)
 create mode 100644 templates/port.html.njk
 create mode 100644 templates/port.txt.njk

diff --git a/src/routes/port.ts b/src/routes/port.ts
index 942ba1b..5f40846 100644
--- a/src/routes/port.ts
+++ b/src/routes/port.ts
@@ -4,6 +4,7 @@ import { z } from "zod";
 import * as IP from "ip";
 import realIP from "../middlewares/real-ip";
 import presentation from "../middlewares/presentation";
+import render from "../utils/renderer";
 
 export const portRoute = new Hono();
 
@@ -55,12 +56,14 @@ portRoute.get("/:port", realIP, presentation, async context => {
 
 	const result = await connectToAddress(ip, port, { timeout });
 
-	return context.json({
+	return render(context, "port", {
+		port: port,
 		isOpen: result.isOpen,
+		ip: ip,
 	});
 });
 
-portRoute.get("/:ip/:port", async context => {
+portRoute.get("/:ip/:port", realIP, presentation, async context => {
 	const rawData = {
 		ip: context.req.param("ip"),
 		port: context.req.param("port"),
@@ -92,7 +95,9 @@ portRoute.get("/:ip/:port", async context => {
 
 	const result = await connectToAddress(ip, port, { timeout });
 
-	return context.json({
+	return render(context, "port", {
+		port: port,
 		isOpen: result.isOpen,
+		ip: ip,
 	});
 });
diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts
index 9e56dd3..7469c8b 100644
--- a/src/utils/renderer.ts
+++ b/src/utils/renderer.ts
@@ -4,7 +4,7 @@ import * as nunjucks from "nunjucks";
 
 export default async function render(
 	context: Context,
-	templateName: "index",
+	templateName: "index" | "port",
 	ctx: Record<string, any>,
 ) {
 	const presentation = context.get("presentation") as PresentationType;
diff --git a/templates/base.html.njk b/templates/base.html.njk
index 12802e8..8018eca 100644
--- a/templates/base.html.njk
+++ b/templates/base.html.njk
@@ -33,6 +33,11 @@
 				border-radius: 1em;
 				padding: 3em;
 			}
+
+			h2 {
+				margin-top: 0;
+				text-align: left;
+			}
 		</style>
 
 		{% block header %}{% endblock %}
diff --git a/templates/index.html.njk b/templates/index.html.njk
index dfd7416..1d32b5a 100644
--- a/templates/index.html.njk
+++ b/templates/index.html.njk
@@ -2,11 +2,6 @@
 
 {% block header %}
 	<style type="text/css">
-		h2 {
-			margin-top: 0;
-			text-align: left;
-		}
-
 		code {
 			background-color: #2f2f2f;
 			color: #eee;
diff --git a/templates/port.html.njk b/templates/port.html.njk
new file mode 100644
index 0000000..81e51ea
--- /dev/null
+++ b/templates/port.html.njk
@@ -0,0 +1,96 @@
+{% extends "base.html.njk" %}
+
+{% block header %}
+    <style type="text/css">
+        .status {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            column-gap: .6em;
+
+            font-size: 1.5rem;
+        }
+
+        .status p {
+            margin: 0;
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+
+        #icon {
+            width: 0.7em;
+            height: 0.7em;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            position: relative;
+        }
+
+        .status.success {
+            color: #2ecc71;
+        }
+
+        .status.error {
+            color: #e74c3c;
+        }
+
+        .status.success #icon {
+            background-color: #2ecc71;
+        }
+
+        .status.error #icon {
+            background-color: #e74c3c;
+        }
+
+        .status.success #icon::before {
+            content: "";
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background-color: #2ecc71;
+            opacity: 0.3;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            transform: scale(2);
+
+            animation: pulse 3s ease-out infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+                opacity: 0.6;
+            }
+            100% {
+                transform: scale(2);
+                opacity: 0;
+            }
+        }
+    </style>
+{% endblock %}
+
+{% block main %}
+    <h2>Am I Open</h2>
+
+    <i>{{ ip }}</i>
+
+    {% if isOpen %}
+        <div class="status success">
+            <div id="icon"></div>
+
+            <p>Port <strong>{{port}}</strong> is open</p>
+        </div>
+    {% else %}
+        <div class="status error">
+            <div id="icon"></div>
+
+            <p>Port <strong>{{port}}</strong> is closed</p>
+        </div>
+    {% endif %}
+{% endblock %}
diff --git a/templates/port.txt.njk b/templates/port.txt.njk
new file mode 100644
index 0000000..59d8068
--- /dev/null
+++ b/templates/port.txt.njk
@@ -0,0 +1 @@
+{% if isOpen %}open{% else %}closed{% endif %}