{% extends "base.njk.html" %} {% block header %}
<style type="text/css">
	.status {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		column-gap: 0.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 %}