UI refresh

src/public/style/index.css

@@ -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;
+    width: 720px;
-    font-family: 'Inter', sans-serif;
+    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;
+    padding: 1em;
-    border: 1px solid black;
+    border-radius: 8px;
-    border-radius: 4px;
+    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: none;
-    border-radius: 4px;
+    border-radius: 8px;
-    color: white;
+    color: var(--on-accent);
     background-color: var(--accent);
+    box-shadow: var(--shadow-sm);
 }
 
 pre code {
     padding: .5em;
-    border: 1px solid black;
+    border-radius: 8px;
-    border-radius: 4px;
+    font-size: 16px;
-    font-size: .8em;
+
-    color: #e0e0e0;
+    background-color: var(--fg-1);
-    background-color: #303030;
+    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 {

src/views/index.html

@@ -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>