Myzel394/amiopen.now
1
0
Fork 0
mirror of https://github.com/Myzel394/amiopen.now.git synced 2025-06-18 15:35:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2 from Myzel394/add-user-agent

Browse Source
This commit is contained in:
Myzel394 2024-12-20 21:16:22 +01:00 committed by GitHub
commit 0e1c34d34e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 86 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/root.ts
View File

@ -8,7 +8,6 @@ export const rootRoute = new Hono();
rootRoute.get("/", realIP, presentation, context => { rootRoute.get("/", realIP, presentation, context => {
// Move request to correct route // Move request to correct route
const { port, ipAddress } = context.req.query(); const { port, ipAddress } = context.req.query();
if (port) { if (port) {
if (ipAddress) { if (ipAddress) {
return context.redirect(`/${ipAddress}/${port}`); 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", { return render(context, "index", {
ip: context.get("ip"), ip: context.get("ip"),
userAgent,
}); });
}); });

40
templates/base.njk.html
View File

@ -18,20 +18,27 @@
color: #eee; color: #eee;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-bottom: 1em;
}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 40em;
padding: 2em 0;
} }
main { main {
background-color: #212126; background-color: #212126;
width: 100%;
max-width: 40em;
margin: 0 auto; margin: 0 auto;
border-radius: 1em; border-radius: 1em;
padding: 3em; padding: 2em;
} }
h2 { h2 {
@ -43,7 +50,6 @@
display: flex; display: flex;
justify-content: end; justify-content: end;
column-gap: 1em; column-gap: 1em;
margin-top: 1.4em;
} }
.socials img { .socials img {
@ -63,15 +69,26 @@
text-align: center; text-align: center;
opacity: 0.6; opacity: 0.6;
} }
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
}
header h2 {
margin: 0;
}
</style> </style>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</head> </head>
<body> <body>
<div class="wrapper">
<main> <main>
{% block main %} <header>
<h2>Am I Open</h2> <h2>Am I Open</h2>
{% endblock %}
<div class="socials"> <div class="socials">
<a <a
@ -89,8 +106,13 @@
<img src="/static/twitter.svg" alt="Twitter / X" /> <img src="/static/twitter.svg" alt="Twitter / X" />
</a> </a>
</div> </div>
</header>
{% block main %} {% endblock %}
</main> </main>
<i id="hint">No logs are stored. I have no idea that you were here.</i> <div id="hint">
{% block scripts %} {% endblock %} <i> No logs are stored. I have no idea that you were here. </i>
</div>
</div>
</body> </body>
{% block scripts %} {% endblock %}
</html> </html>

36
templates/index.njk.html
View File

@ -63,9 +63,12 @@
color: #fff; color: #fff;
filter: invert(1); filter: invert(1);
} }
.user-agent {
font-size: 0.7rem;
}
</style> </style>
{% endblock %} {% block main %} {% endblock %} {% block main %}
<h2>Am I Open</h2>
<small> <small>
A small, terminal-friendly utility for checking your ports and your IP A small, terminal-friendly utility for checking your ports and your IP
address. address.
@ -76,6 +79,16 @@
<img width="1em" src="/static/copy.svg" alt="Copy" /> <img width="1em" src="/static/copy.svg" alt="Copy" />
</button> </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" 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> <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> <pre><code><span class="comment">$</span> <span class="command">curl</span> amiopen.now/<span class="input">&lt;port&gt;</span>
@ -102,12 +115,31 @@
<pre><code><span class="comment">$</span> <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> </i>
{% endblock %} {% block scripts %} {% endblock %} {% block scripts %}
<script defer> <script defer async>
const $copyButton = document.getElementById("copy-ip"); const $copyButton = document.getElementById("copy-ip");
const ip = "{{ip}}"; const ip = "{{ip}}";
$copyButton.addEventListener("click", () => { $copyButton.addEventListener("click", () => {
navigator.clipboard.writeText(ip); 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> </script>
{% endblock %} {% endblock %}