{% extends "base.njk.html" %} {% block header %}
<style type="text/css">
	code {
		background-color: #2f2f2f;
		color: #eee;
		padding: 1em;
		border-radius: 0.5em;
		width: 100%;
		display: block;
	}

	code .command {
		color: #598eb2;
	}

	code .input {
		color: #b27b59;
	}

	code .second-input {
		color: #b2596e;
	}

	code .secondary {
		color: #b2a559;
	}

	code .comment {
		color: #5c6370;
	}

	code a {
		text-decoration: none;
		text-underline-offset: 0.15em;
		color: unset;
	}

	code a:hover {
		text-decoration: underline dotted 1px #aaa;
	}

	.copy {
		cursor: pointer;
		border: none;

		border-radius: 0.4em;

		aspect-ratio: 1;

		background: transparent;

		vertical-align: middle;

		transition: background-color 0.2s;
	}

	.copy:hover {
		background: #ffffff40;
	}

	.copy img {
		width: 1rem;
		color: #fff;
		filter: invert(1);
	}

	.user-agent {
		font-size: 0.7rem;
	}
</style>
{% endblock %} {% block main %}
<small>
	A small, terminal-friendly utility for checking your ports and your IP
	address.
</small>
<p>
	Your IP address: <strong>{{ip}}</strong>
	<button class="copy" id="copy-ip">
		<img width="1em" src="/static/copy.svg" alt="Copy" />
	</button>
</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" class="user-agent">
	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>

<span class="comment">// Example</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="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> <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="comment">$</span> <span class="command">telnet</span> amiopen.now <span class="input">&lt;port&gt;</span>

<span class="comment">// Example</span>
<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="comment">$</span> <span class="command">ssh</span> <span class="secondary">hello</span>@amiopen.now</code></pre>
</i>
{% endblock %} {% block scripts %}
<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 %}