amiopen.now/templates/index.html.njk

{% extends "base.html.njk" %}

{% 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: .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);
		}
	</style>
{% endblock %}

{% 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">
			<img width="1em" src="/static/copy.svg" alt="Copy" />
		</button>
	</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>
		const $copyButton = document.getElementById("copy-ip");
		const ip = "{{ip}}";

		$copyButton.addEventListener("click", () => {
			navigator.clipboard.writeText(ip);
		});
	</script>
{% endblock %}