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

feat: Improve UI

Browse Source
This commit is contained in:
Myzel394 2024-12-20 21:15:31 +01:00
parent 23ea1ff32e
commit 384df9c1c1
No known key found for this signature in database
GPG Key ID: ED20A1D1D423AF3F
2 changed files with 56 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
templates/base.njk.html
View File

@ -18,22 +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: 2em auto;
margin: 0 auto;
border-radius: 1em;
padding: 3em;
overflow: scroll;
padding: 2em;
}
h2 {
@ -45,7 +50,6 @@
display: flex;
justify-content: end;
column-gap: 1em;
margin-top: 1.4em;
}
.socials img {
@ -65,34 +69,50 @@
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>
<main>
{% block main %}
<h2>Am I Open</h2>
{% endblock %}
<div class="wrapper">
<main>
<header>
<h2>Am I Open</h2>
<div class="socials">
<a
href="https://github.com/Myzel394/amiopen.now"
target="_blank"
rel="noopener noreferrer"
>
<img src="/static/github.svg" alt="GitHub" />
</a>
<a
href="https://twitter.com/Myzel394"
target="_blank"
rel="noopener noreferrer"
>
<img src="/static/twitter.svg" alt="Twitter / X" />
</a>
<div class="socials">
<a
href="https://github.com/Myzel394/amiopen.now"
target="_blank"
rel="noopener noreferrer"
>
<img src="/static/github.svg" alt="GitHub" />
</a>
<a
href="https://twitter.com/Myzel394"
target="_blank"
rel="noopener noreferrer"
>
<img src="/static/twitter.svg" alt="Twitter / X" />
</a>
</div>
</header>
{% block main %} {% endblock %}
</main>
<div id="hint">
<i> No logs are stored. I have no idea that you were here. </i>
</div>
</main>
<i id="hint">No logs are stored. I have no idea that you were here.</i>
{% block scripts %} {% endblock %}
</div>
</body>
{% block scripts %} {% endblock %}
</html>

9
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,13 +79,13 @@
<img width="1em" src="/static/copy.svg" alt="Copy" />
</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">
<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>