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 => {
// Move request to correct route
const { port, ipAddress } = context.req.query();
if (port) {
if (ipAddress) {
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", {
ip: context.get("ip"),
userAgent,
});
});

40
templates/base.njk.html
View File

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

36
templates/index.njk.html
View File

@ -63,9 +63,12 @@
color: #fff;
filter: invert(1);
}
.user-agent {
font-size: 0.7rem;
}
</style>
{% endblock %} {% block main %}
<h2>Am I Open</h2>
<small>
A small, terminal-friendly utility for checking your ports and your IP
address.
@ -76,6 +79,16 @@
<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>
@ -102,12 +115,31 @@
<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>
<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 %}