From 23ea1ff32e2cee7f326a232118c035d8e5130656 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Fri, 20 Dec 2024 21:01:38 +0100
Subject: [PATCH 1/2] feat: Add user agent detection

---
 src/routes/root.ts       |  4 +++-
 templates/base.njk.html  |  4 +++-
 templates/index.njk.html | 31 ++++++++++++++++++++++++++++++-
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/routes/root.ts b/src/routes/root.ts
index 41b012e..fcc14a4 100644
--- a/src/routes/root.ts
+++ b/src/routes/root.ts
@@ -8,7 +8,6 @@ export const rootRoute = new Hono();
 rootRoute.get("/", realIP, presentation, context => {
 	// Move request to correct route
 	const { port, ipAddress } = context.req.query();
-
 	if (port) {
 		if (ipAddress) {
 			return context.redirect(`/${ipAddress}/${port}`);
@@ -17,7 +16,10 @@ rootRoute.get("/", realIP, presentation, context => {
 		}
 	}
 
+	// Render index page
+	const userAgent = context.req.header("User-Agent");
 	return render(context, "index", {
 		ip: context.get("ip"),
+		userAgent,
 	});
 });
diff --git a/templates/base.njk.html b/templates/base.njk.html
index 87d7631..5106feb 100644
--- a/templates/base.njk.html
+++ b/templates/base.njk.html
@@ -29,9 +29,11 @@
 				background-color: #212126;
 				width: 100%;
 				max-width: 40em;
-				margin: 0 auto;
+				margin: 2em auto;
 				border-radius: 1em;
 				padding: 3em;
+
+				overflow: scroll;
 			}
 
 			h2 {
diff --git a/templates/index.njk.html b/templates/index.njk.html
index ef7cd25..f985ade 100644
--- a/templates/index.njk.html
+++ b/templates/index.njk.html
@@ -76,6 +76,16 @@
 		<img width="1em" src="/static/copy.svg" alt="Copy" />
 	</button>
 </p>
+<p>
+	Your User-Agent (Header): <i>{{userAgent}}</i>
+	<button class="copy" id="copy-user-agent">
+		<img width="1em" src="/static/copy.svg" alt="Copy" />
+	</button>
+</p>
+<p id="user-agent-navigator" style="display: none">
+	Your User-Agent detected via JavaScript:
+	<i id="user-agent-navigator-value"></i>
+</p>
 
 <strong> Check if your port is reachable: </strong>
 <pre><code><span class="comment">$</span> <span class="command">curl</span> amiopen.now/<span class="input">&lt;port&gt;</span>
@@ -102,12 +112,31 @@
 	<pre><code><span class="comment">$</span> <span class="command">ssh</span> <span class="secondary">hello</span>@amiopen.now</code></pre>
 </i>
 {% endblock %} {% block scripts %}
-<script defer>
+<script defer async>
 	const $copyButton = document.getElementById("copy-ip");
 	const ip = "{{ip}}";
 
 	$copyButton.addEventListener("click", () => {
 		navigator.clipboard.writeText(ip);
 	});
+
+	const $copyUserAgentButton = document.getElementById("copy-user-agent");
+	const userAgent = "{{userAgent}}";
+
+	$copyUserAgentButton.addEventListener("click", () => {
+		navigator.clipboard.writeText(userAgent);
+	});
+
+	if (navigator.userAgent && navigator.userAgent !== "{{userAgent}}") {
+		const $userAgentNavigator = document.getElementById(
+			"user-agent-navigator",
+		);
+		const $userAgentNavigatorValue = document.getElementById(
+			"user-agent-navigator-value",
+		);
+
+		$userAgentNavigator.style.display = "block";
+		$userAgentNavigatorValue.innerText = navigator.userAgent;
+	}
 </script>
 {% endblock %}

From 384df9c1c1526615adcb3af6d5d017b4cdd8cf15 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Fri, 20 Dec 2024 21:15:31 +0100
Subject: [PATCH 2/2] feat: Improve UI

---
 templates/base.njk.html  | 80 +++++++++++++++++++++++++---------------
 templates/index.njk.html |  9 +++--
 2 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/templates/base.njk.html b/templates/base.njk.html
index 5106feb..0f196ce 100644
--- a/templates/base.njk.html
+++ b/templates/base.njk.html
@@ -18,22 +18,27 @@
 				color: #eee;
 				margin: 0;
 				padding: 0;
-				height: 100vh;
+				min-height: 100vh;
 
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
+
+				padding-bottom: 1em;
+			}
+
+			.wrapper {
+				margin: 0 auto;
+				width: 100%;
+				max-width: 40em;
+				padding: 2em 0;
 			}
 
 			main {
 				background-color: #212126;
-				width: 100%;
-				max-width: 40em;
-				margin: 2em auto;
+				margin: 0 auto;
 				border-radius: 1em;
-				padding: 3em;
-
-				overflow: scroll;
+				padding: 2em;
 			}
 
 			h2 {
@@ -45,7 +50,6 @@
 				display: flex;
 				justify-content: end;
 				column-gap: 1em;
-				margin-top: 1.4em;
 			}
 
 			.socials img {
@@ -65,34 +69,50 @@
 				text-align: center;
 				opacity: 0.6;
 			}
+
+			header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 1em;
+			}
+
+			header h2 {
+				margin: 0;
+			}
 		</style>
 
 		{% block header %}{% endblock %}
 	</head>
 	<body>
-		<main>
-			{% block main %}
-			<h2>Am I Open</h2>
-			{% endblock %}
+		<div class="wrapper">
+			<main>
+				<header>
+					<h2>Am I Open</h2>
 
-			<div class="socials">
-				<a
-					href="https://github.com/Myzel394/amiopen.now"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<img src="/static/github.svg" alt="GitHub" />
-				</a>
-				<a
-					href="https://twitter.com/Myzel394"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<img src="/static/twitter.svg" alt="Twitter / X" />
-				</a>
+					<div class="socials">
+						<a
+							href="https://github.com/Myzel394/amiopen.now"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<img src="/static/github.svg" alt="GitHub" />
+						</a>
+						<a
+							href="https://twitter.com/Myzel394"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<img src="/static/twitter.svg" alt="Twitter / X" />
+						</a>
+					</div>
+				</header>
+				{% block main %} {% endblock %}
+			</main>
+			<div id="hint">
+				<i> No logs are stored. I have no idea that you were here. </i>
 			</div>
-		</main>
-		<i id="hint">No logs are stored. I have no idea that you were here.</i>
-		{% block scripts %} {% endblock %}
+		</div>
 	</body>
+	{% block scripts %} {% endblock %}
 </html>
diff --git a/templates/index.njk.html b/templates/index.njk.html
index f985ade..8d7b1e4 100644
--- a/templates/index.njk.html
+++ b/templates/index.njk.html
@@ -63,9 +63,12 @@
 		color: #fff;
 		filter: invert(1);
 	}
+
+	.user-agent {
+		font-size: 0.7rem;
+	}
 </style>
 {% endblock %} {% block main %}
-<h2>Am I Open</h2>
 <small>
 	A small, terminal-friendly utility for checking your ports and your IP
 	address.
@@ -76,13 +79,13 @@
 		<img width="1em" src="/static/copy.svg" alt="Copy" />
 	</button>
 </p>
-<p>
+<p class="user-agent">
 	Your User-Agent (Header): <i>{{userAgent}}</i>
 	<button class="copy" id="copy-user-agent">
 		<img width="1em" src="/static/copy.svg" alt="Copy" />
 	</button>
 </p>
-<p id="user-agent-navigator" style="display: none">
+<p id="user-agent-navigator" style="display: none" class="user-agent">
 	Your User-Agent detected via JavaScript:
 	<i id="user-agent-navigator-value"></i>
 </p>