chore: add mercury
This commit is contained in:
BIN
mercury/public/favicon.ico
Normal file
BIN
mercury/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
47
mercury/public/index.html
Normal file
47
mercury/public/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>☿ Mercury ☿</title>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.0-alpha1/dist/htmx.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css" />
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav style="position: absolute; top:0; right:50px" hx-trigger="load" hx-get="/ident"></nav>
|
||||
<h1>☿ Mercury ☿</h1>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<form class="search" hx-get="/api/v1/mercury/config" hx-target="#config-results"
|
||||
hx-headers='{"Accept": "text/html"}''>
|
||||
<div>@</div>
|
||||
<input id="space-config" name="space" type="text" placeholder="Space...">
|
||||
<button type="submit">Load</button>
|
||||
</form>
|
||||
<code tabindex="0"><pre id="config-results"></pre></code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form class="edit" hx-post="/api/v1/mercury/config" hx-target="#space-saved" hx-encoding="multipart/form-data">
|
||||
<button type="submit">Save</button>
|
||||
<br />
|
||||
<textarea name="content" rows="45" wrap="off"
|
||||
onkeyup="if (this.scrollHeight > this.clientHeight) this.style.height = this.scrollHeight + ' px';"
|
||||
style="overflow:auto; overflow-y:hidden; transition: height 0.2s ease-out;"></textarea>
|
||||
</form>
|
||||
<pre id="space-saved"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
sour.is 🅭2024
|
||||
<span hx-trigger="load" hx-get="/api/v1/app-info"></span>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
212
mercury/public/style.css
Normal file
212
mercury/public/style.css
Normal file
@@ -0,0 +1,212 @@
|
||||
* {
|
||||
font-weight: lighter;
|
||||
font-family: 'fira code', monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 0 50px;
|
||||
background: rgb(63, 94, 251);
|
||||
background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
|
||||
height: 100px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 100px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-size: small;
|
||||
border: 2px solid cornflowerblue;
|
||||
}
|
||||
|
||||
input.invalid {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 2px solid cornflowerblue;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
font-size: small;
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
code strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code dfn {
|
||||
color: green
|
||||
}
|
||||
|
||||
code i {
|
||||
color: grey
|
||||
}
|
||||
|
||||
code em {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
code:focus {
|
||||
animation: select 100ms step-end forwards;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
font-size: x-small;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1em;
|
||||
padding: 4px;
|
||||
color: white;
|
||||
border-top: 1px solid black;
|
||||
background: cornflowerblue;
|
||||
}
|
||||
|
||||
footer>span {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 50px;
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container .open {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.container>div {
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
background: rgb(238, 174, 202);
|
||||
border: 0px ;
|
||||
}
|
||||
|
||||
.container>div>code {
|
||||
-webkit-user-select: all;
|
||||
/* for Safari */
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.search>div {
|
||||
background-color: lightgrey;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
border: 2px solid cornflowerblue;
|
||||
border-right: 0;
|
||||
user-select: none;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.search>button {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.search>div {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.search>input {
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
.search>button {
|
||||
flex-grow: 2;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
}
|
||||
|
||||
.edit {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.edit>button {
|
||||
line-height: 28px;
|
||||
border-bottom: 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.edit>textarea {
|
||||
margin-top: 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
@keyframes select {
|
||||
to {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color: white;
|
||||
background: #111
|
||||
}
|
||||
|
||||
header {
|
||||
background: #111;
|
||||
background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(7, 80, 29, 1) 35%, rgba(0, 0, 0, 1) 100%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.container>div {
|
||||
background: #111;
|
||||
/* background: linear-gradient(304deg, rgba(2, 0, 36, 1) 0%, rgba(77, 77, 77, 1) 18%, rgba(0, 0, 0, 1) 100%); */
|
||||
border: 2px solid rgb(117, 117, 117);
|
||||
}
|
||||
|
||||
.search>div {
|
||||
background-color: grey;
|
||||
border-color: rgb(117, 117, 117);
|
||||
}
|
||||
|
||||
button {
|
||||
color: white;
|
||||
background: rgba(7, 80, 29, 1);
|
||||
border: 2px solid rgb(117, 117, 117);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgb(11, 121, 44);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background: rgb(5, 59, 21);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
color: white;
|
||||
background-color: #111;
|
||||
border: 2px solid rgb(117, 117, 117);
|
||||
}
|
||||
footer {
|
||||
color: white;
|
||||
border-top: 1px solid white;
|
||||
background: #222;
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user