From 9ff1768ff2a746a4c363824aa7a2aa774da1ed3c Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Thu, 21 Nov 2024 21:18:44 +0100
Subject: [PATCH] fix: Improvements

---
 templates/base.html.njk  | 10 ++++++++--
 templates/index.html.njk | 29 +++++++++++++++++++++--------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/templates/base.html.njk b/templates/base.html.njk
index 35eff80..fa72e1c 100644
--- a/templates/base.html.njk
+++ b/templates/base.html.njk
@@ -57,6 +57,12 @@
 			.socials img:hover {
 				filter: invert(1);
 			}
+
+			#hint {
+				margin: 1.4em auto 0 auto;
+				text-align: center;
+				opacity: 0.6;
+			}
 		</style>
 
 		{% block header %}{% endblock %}
@@ -72,11 +78,11 @@
 					<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="GitHub" />
+					<img src="/static/twitter.svg" alt="Twitter / X" />
 				</a>
 			</div>
 		</main>
-		<i>No logs are stored. I have no idea, that you were here.</i>
+		<i id="hint">No logs are stored. I have no idea that you were here.</i>
 		{% block scripts %}
 		{% endblock %}
 	</body>
diff --git a/templates/index.html.njk b/templates/index.html.njk
index 1d32b5a..0ed991b 100644
--- a/templates/index.html.njk
+++ b/templates/index.html.njk
@@ -31,6 +31,16 @@
 			color: #5c6370;
 		}
 
+        code a {
+            text-decoration: none;
+            text-underline-offset: .15em;
+            color: unset;
+        }
+
+        code a:hover {
+            text-decoration: underline dotted 1px #aaa;
+        }
+
 		.copy {
 			cursor: pointer;
 			border: none;
@@ -60,6 +70,9 @@
 
 {% block main %}
 	<h2>Am I Open</h2>
+    <small>
+        A small, terminal-friendly utility for checking port and your IP address.
+    </small>
 	<p>
 		Your IP address: <strong>{{ip}}</strong>
 		<button class="copy" id="copy-ip">
@@ -68,28 +81,28 @@
 	</p>
 
 	<strong> Check if your port is reachable: </strong>
-	<pre><code><span class="command">curl</span> amiopen.now/<span class="input">&lt;port&gt;</span>
+	<pre><code><span class="comment">$</span> <span class="command">curl</span> amiopen.now/<span class="input">&lt;port&gt;</span>
 
 <span class="comment">// Example</span>
-<span class="command">curl</span> amiopen.now/<span class="input">80</span>
+<span class="comment">$</span> <a href="/80"><span class="command">curl</span> amiopen.now/<span class="input">80</span></a>
 > open</code></pre>
 
 	<strong> Check if an IP address is reachable: </strong>
-	<pre><code><span class="command">curl</span> amiopen.now/<span class="second-input">&lt;ip address&gt;</span>/<span class="input">&lt;port&gt;</span>
+	<pre><code><span class="comment">$</span> <span class="command">curl</span> amiopen.now/<span class="second-input">&lt;ip address&gt;</span>/<span class="input">&lt;port&gt;</span>
 
 <span class="comment">// Example</span>
-<span class="comment">$</span> <span class="command">curl</span> amiopen.now/<span class="second-input">1.1.1.1</span>/<span class="input">53</span>
+<span class="comment">$</span> <a href="/1.1.1.1/53"><span class="command">curl</span> amiopen.now/<span class="second-input">1.1.1.1</span>/<span class="input">53</span></a>
 > open</code></pre>
 
 	<strong> Check if your ISP is blocking a port: </strong>
-	<pre><code><span class="command">telnet</span> amiopen.now <span class="input">&lt;port&gt;</span>
+	<pre><code><span class="comment">$</span> <span class="command">telnet</span> amiopen.now <span class="input">&lt;port&gt;</span>
 
 <span class="comment">// Example</span>
-<span class="command">telnet</span> amiopen.now <span class="input">80</span></code></pre>
+<span class="comment">$</span> <span class="command">telnet</span> amiopen.now <span class="input">80</span></code></pre>
 
 	<i>
 		Hint: You can also check if you can access SSH by using:
-		<pre><code><span class="command">ssh</span> <span class="secondary">hello</span>@amiopen.now</code></pre>
+		<pre><code><span class="comment">$</span> <span class="command">ssh</span> <span class="secondary">hello</span>@amiopen.now</code></pre>
 	</i>
 {% endblock %}
 
@@ -98,7 +111,7 @@
 		const $copyButton = document.getElementById("copy-ip");
 		const ip = "{{ip}}";
 
-		copyButton.addEventListener("click", () => {
+		$copyButton.addEventListener("click", () => {
 			navigator.clipboard.writeText(ip);
 		});
 	</script>