ari/OpenTerminal
ari/OpenTerminal
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

mobile support! readme!! branding!!!

Browse source
This commit is contained in:
ari melody 2023-09-30 10:55:58 +01:00
parent 33b16ad70f
commit 5f2051bd2b
Signed by: ari
GPG key ID: CF99829C92678188
7 changed files with 119 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/thumbnail.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 351 KiB

21
public/index.html
View file

@ -2,6 +2,20 @@
<html lang="ie">
<head>
<title>OpenTerminal</title>
<meta name="description" content="An online terminal and communal text buffer :)">
<meta property="og:url" content="https://term.arimelody.me">
<meta property="og:type" content="website">
<meta property="og:title" content="OpenTerminal">
<meta property="og:description" content="An online terminal and communal text buffer :)">
<meta property="og:image" content="https://term.arimelody.me/img/thumbnail.png">
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="term.arimelody.me">
<meta property="twitter:url" content="https://term.arimelody.me">
<meta name="twitter:title" content="OpenTerminal">
<meta name="twitter:description" content="An online terminal and communal text buffer :)">
<meta name="twitter:image" content="https://term.arimelody.me/img/thumbnail.png">
<link rel="stylesheet" href="/styles/main.css">
<link rel="icon" type="image/png" href="/favicon.png">
@ -12,7 +26,14 @@
<body>
<main>
<pre id="content"></pre>
<input type="text" id="mobile-input">
</main>
<footer>
<ul>
<li><a href="https://arimelody.me" target="_blank">made with &lt;3 by ari melody</a></li>
<li><a href="https://github.com/mellodoot/openterminal" target="_blank">source</a></li>
</ul>
</footer>
<div id="overlay"></div>
</body>
</html>

18
public/scripts/main.js
View file

@ -1,6 +1,7 @@
var buffer = "";
var send_buffer = "";
var content;
var mobile_input;
var client;
var pre_buffer_chars = 0;
var term_interval = 10;
@ -10,7 +11,7 @@ function start() {
console.log("%chello, world!", "color: #b7fd49; font-size: 3rem; font-weight: bold");
console.log(
`welcome to OpenTerminal!
home to a little shared text buffer.
home to an online terminal and communal text buffer.
i hope you enjoy your stay here!
to help you feel a little more comfortable, i've prepared some commands for you:
@ -31,6 +32,11 @@ to help you feel a little more comfortable, i've prepared some commands for you:
}
content = document.getElementById("content");
mobile_input = document.getElementById("mobile-input");
content.addEventListener("click", () => {
mobile_input.focus();
});
buffer += "Connecting to the server...";
@ -52,6 +58,8 @@ function loop() {
send_buffer = send_buffer.substring(1);
}
mobile_input.value = content.innerText;
setTimeout(loop, term_interval);
}
@ -72,7 +80,7 @@ function connect() {
});
client.addEventListener('close', () => {
insert_text("\n\n[CONNECTION LOST]");
insert_text("\n\n[CONNECTION LOST, PLEASE REFRESH]");
});
}
@ -83,8 +91,10 @@ function insert_text(text) {
if (text == "\x00") {
content.innerText = "";
pre_buffer_chars = 0;
} else if (text == "\b" && content.innerText.length > pre_buffer_chars) {
content.innerText = content.innerText.slice(0, content.innerText.length - 1);
} else if (text == "\b") {
if (content.innerText.length > pre_buffer_chars) {
content.innerText = content.innerText.slice(0, content.innerText.length - 1);
}
} else {
content.innerText += text;
}

47
public/styles/main.css
View file

@ -13,12 +13,12 @@ body {
}
main {
margin: 1rem;
margin: 1rem 1rem 0 1rem;
border: 1px solid var(--colour);
}
pre#content {
height: calc(100vh - 66px);
height: calc(100vh - 5rem);
margin: 0;
padding: 1rem;
overflow-x: hidden;
@ -46,6 +46,37 @@ div#carat {
}
}
footer {
height: 18px;
padding: .5em 2em;
display: flex;
gap: 1em;
align-items: center;
}
footer ul {
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
footer li {
list-style: none;
opacity: .5;
}
footer li:hover {
text-shadow: 0 0 1em, 0 0 3em;
opacity: 1;
}
footer a {
color: var(--colour);
text-decoration: none;
}
div#overlay {
position: fixed;
top: 0;
@ -69,3 +100,15 @@ div#overlay {
opacity: .6;
}
}
#mobile-input {
position: absolute;
top: 1.2em;
left: 1.2em;
width: calc(100vw - 3em);
height: calc(100vh - 3.9em);
opacity: 0;
user-select: none;
pointer-events: none;
}