ari/mcstatusface
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

UI refresh

Browse source
This commit is contained in:
ari melody 2025-11-05 01:40:30 +00:00
parent 394419fa63
commit 8a30e93a89
Signed by: ari
GPG key ID: CF99829C92678188
2 changed files with 67 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/public/style/index.css
View file

@ -1,10 +1,47 @@
:root {
--accent: #7ca82f;
--bg-0: #101010;
--bg-1: #181818;
--bg-2: #282828;
--fg-0: #c0c0c0;
--fg-1: #d0d0d0;
--fg-2: #e0e0e0;
--accent: #c0ea76;
--on-accent: #43600f;
--shadow-md: 0 2px 4px rgba(0,0,0,.5);
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
}
@media (prefers-color-scheme: light) {
:root {
--bg-0: #e8e8e8;
--bg-1: #f0f0f0;
--bg-2: #fcfcfc;
--fg-0: #606060;
--fg-1: #303030;
--fg-2: #101010;
--accent: #6a9321;
--on-accent: #f6ffe6;
--shadow-md: 0 2px 4px rgba(0,0,0,.25);;
--shadow-sm: 0 1px 2px rgba(0,0,0,.15);;
}
}
body {
font-size: 16px;
font-family: 'Inter', sans-serif;
width: 720px;
max-width: calc(100vw - 1em);
margin: auto;
font-size: 20px;
font-family: 'Inter', 'Arial', sans-serif;
background-color: var(--bg-0);
color: var(--fg-0);
}
* {
transition: background-color .2s ease-out, color .2s ease-out;
}
a {
@ -17,34 +54,45 @@ a:hover {
form {
width: fit-content;
padding: .5em;
border: 1px solid black;
border-radius: 4px;
padding: 1em;
border-radius: 8px;
background-color: var(--bg-1);
color: var(--fg-1);
box-shadow: var(--shadow-md);
}
form input[type="text"] {
width: fit-content;
min-width: 16em;
padding: .2em .4em;
font-size: inherit;
border: none;
border-radius: 4px;
background-color: var(--bg-2);
color: var(--fg-2);
box-shadow: var(--shadow-sm);
}
form button {
margin-top: .5em;
padding: .2em .3em;
padding: .2em .4em;
font-family: inherit;
font-size: inherit;
border: 1px solid black;
border-radius: 4px;
color: white;
border: none;
border-radius: 8px;
color: var(--on-accent);
background-color: var(--accent);
box-shadow: var(--shadow-sm);
}
pre code {
padding: .5em;
border: 1px solid black;
border-radius: 4px;
font-size: .8em;
color: #e0e0e0;
background-color: #303030;
border-radius: 8px;
font-size: 16px;
background-color: var(--fg-1);
color: var(--bg-1);
box-shadow: var(--shadow-sm);
}
pre#motd {
@ -55,6 +103,7 @@ pre#motd code {
display: block;
width: fit-content;
min-width: 440px;
box-shadow: var(--shadow-sm);
}
footer {

6
src/views/index.html
View file

@ -21,7 +21,7 @@
<hr/>
<main>
<p>
You can use this website to retrieve query information from a Minecraft server!
This website retrieves query information from Minecraft servers!
</p>
<p>
For more information, see <a href="https://minecraft.wiki/w/Query">https://minecraft.wiki/w/Query</a>.
@ -38,13 +38,13 @@
Alternatively, you can cURL this website to get a raw JSON response:
</p>
<pre><code>curl 'https://{{host}}?s=&lt;server address&gt;'</code></pre>
<pre><code>curl 'https://{{host}}?s=&lt;server address&gt;' | jq .</code></pre>
{{response}}
</main>
<hr/>
<footer>
<em>made with <span aria-label="love">♥</span> by ari, 2025. <a href="https://git.arimelody.me/ari/mcstatusface" target="_blank">source</a></em>
<em>made with <span aria-label="love">♥</span> by ari, 2025. <a href="https://codeberg.org/arimelody/mcstatusface" target="_blank">source</a></em>
</footer>
</body>
</html>