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

9
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,13 +79,13 @@
<img width="1em" src="/static/copy.svg" alt="Copy" /> <img width="1em" src="/static/copy.svg" alt="Copy" />
</button> </button>
</p> </p>
<p> <p class="user-agent">
Your User-Agent (Header): <i>{{userAgent}}</i> Your User-Agent (Header): <i>{{userAgent}}</i>
<button class="copy" id="copy-user-agent"> <button class="copy" id="copy-user-agent">
<img width="1em" src="/static/copy.svg" alt="Copy" /> <img width="1em" src="/static/copy.svg" alt="Copy" />
</button> </button>
</p> </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: Your User-Agent detected via JavaScript:
<i id="user-agent-navigator-value"></i> <i id="user-agent-navigator-value"></i>
</p> </p>