mirror of
https://github.com/MercuryWorkshop/scramjet.git
synced 2025-05-13 14:30:02 -04:00
update dev server ui again
This commit is contained in:
parent
9d4f5d9abd
commit
8c58108727
2 changed files with 60 additions and 46 deletions
|
@ -6,13 +6,15 @@
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="prefetch" href="./scramjet.worker.js">
|
<link rel="prefetch" href="./scramjet.worker.js">
|
||||||
<link rel="prefetch" href="./scramjet.bundle.js">
|
<link rel="prefetch" href="./scramjet.bundle.js">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap&" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
body, html, #app {
|
body, html, #app {
|
||||||
|
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
width:100vw;
|
width:100vw;
|
||||||
height:100vh;
|
height:100vh;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color:#191724;
|
background-color:#121212;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
102
static/ui.js
102
static/ui.js
|
@ -9,59 +9,71 @@ const store = $store({
|
||||||
wispurl: "wss://wisp.mercurywork.shop/",
|
wispurl: "wss://wisp.mercurywork.shop/",
|
||||||
bareurl: (location.protocol === "https:" ? "https" : "http") + "://" + location.host + "/bare/",
|
bareurl: (location.protocol === "https:" ? "https" : "http") + "://" + location.host + "/bare/",
|
||||||
}, { ident: "settings", backing: "localstorage", autosave: "auto" });
|
}, { ident: "settings", backing: "localstorage", autosave: "auto" });
|
||||||
BareMux.SetTransport("BareMod.BareClient", (location.protocol === "https:" ? "https" : "http") + "://" + location.host + "/bare/")
|
|
||||||
function App() {
|
function App() {
|
||||||
this.urlencoded = "";
|
this.urlencoded = "";
|
||||||
this.css = `
|
this.css = `
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height:100%;
|
height: 100%;
|
||||||
color: #e0def4;
|
color: #e0def4;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction:column;
|
flex-direction: column;
|
||||||
h1 {
|
input,
|
||||||
font-family: "Inter";
|
button {
|
||||||
text-align: center;
|
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
}
|
sans-serif;
|
||||||
iframe {
|
}
|
||||||
border: 8px solid #11528f;
|
h1 {
|
||||||
background-color: #11528f;
|
font-family: "Inter Tight", "Inter", system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
border-radius: 25px;
|
sans-serif;
|
||||||
margin: 2em;
|
margin-bottom: 0;
|
||||||
width: calc(100% - 4em);
|
}
|
||||||
height: calc(100% - 8em);
|
iframe {
|
||||||
}
|
border: 4px solid #313131;
|
||||||
|
background-color: #121212;
|
||||||
input.bar {
|
border-radius: 1rem;
|
||||||
border: none;
|
margin: 2em;
|
||||||
outline: none;
|
margin-top: 0.5em;
|
||||||
color: #191724;
|
width: calc(100% - 4em);
|
||||||
height:2em;
|
height: calc(100% - 8em);
|
||||||
width:60%;
|
}
|
||||||
text-align:center;
|
|
||||||
border-radius: 5px;
|
input.bar {
|
||||||
background-color: #eb6f92;
|
border: none;
|
||||||
}
|
outline: none;
|
||||||
.cfg * {
|
color: #fff;
|
||||||
margin: 2px;
|
height: 2em;
|
||||||
}
|
width: 60%;
|
||||||
.buttons button {
|
text-align: center;
|
||||||
border: 4px solid #11528f;
|
border-radius: 0.75em;
|
||||||
background-color: #eb6f92;
|
background-color: #313131;
|
||||||
color: #191724;
|
padding: 0.45em;
|
||||||
}
|
}
|
||||||
.cfg input {
|
.cfg * {
|
||||||
border: 3px solid #3d84a8;
|
margin: 2px;
|
||||||
background-color: #eb6f92;
|
}
|
||||||
outline: none;
|
.buttons button {
|
||||||
}
|
border: 2px solid #4c8bf5;
|
||||||
|
background-color: #313131;
|
||||||
|
border-radius: 0.75em;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.45em;
|
||||||
|
}
|
||||||
|
.cfg input {
|
||||||
|
border: none;
|
||||||
|
background-color: #313131;
|
||||||
|
border-radius: 0.75em;
|
||||||
|
color: #fff;
|
||||||
|
outline: none;
|
||||||
|
padding: 0.45em;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div>
|
<div>
|
||||||
<h1>Percury Unblocker</h1>
|
<h1>Percury Unblocker</h1>
|
||||||
surf the unblocked and mostly buggy web
|
<p>surf the unblocked and mostly buggy web</p>
|
||||||
|
|
||||||
<div class=${[flex, col, "cfg"]}>
|
<div class=${[flex, col, "cfg"]}>
|
||||||
<input bind:value=${use(store.wispurl)}></input>
|
<input bind:value=${use(store.wispurl)}></input>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue