beenull/webvm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI rework

Browse source
This commit is contained in:
Alessandro Pignotti 2023-05-08 15:39:26 +02:00
parent 395ad534b1
commit a47359325a
1 changed files with 49 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
index.html
View file

@ -45,32 +45,57 @@
<body style="margin:0;height:100%;background:black;color:white;overflow:hidden; display:flex; flex-direction: column; justify-content: space-between; height: 100%;"> <body style="margin:0;height:100%;background:black;color:white;overflow:hidden; display:flex; flex-direction: column; justify-content: space-between; height: 100%;">
<header style="flex-grow:0; flex-srink: 0;height:80px; width: 100%; margin: 2px 0 2px 0;"> <div>
<div style="display: flex; flex-direction: row; justify-content: space-between; width: 100%;"> <div style="padding-top: 0.7em;padding-bottom: 0.7em;font-size: 0.3em; font-weight: 200;vertical-align:center;height: 120px;">
<div style="display: flex; flex-direction: row;"> <div style="margin-left: 20px; height: 100%; display: flex; align-items: center; justify-content: space-between;">
<a href="https://leaningtech.com/" target="_blank"> <pre style="font-family: monospace; font-weight: 600; font-size: large; color: #ad7fa8;">
<img src="./assets/leaningtech.png" style="margin-left: 10px; height: 60px; margin-top: 10px;">
</a> __ __ _ __ ____ __
</div> \ \ / /__| |_\ \ / / \/ |
<div style="display: flex; flex-direction: row; justify-content: space-before;"> \ \/\/ / -_) '_ \ V /| |\/| |
<li style=" margin-right: 50px; height: 100%; display: flex; align-items: center;"> \_/\_/\___|_.__/\_/ |_| |_|
<a href="https://discord.leaningtech.com" target="_blank" style="text-decoration: none"> </pre>
<div style="color: white; font-family: montserrat; font-weight: 700; font-size: large;">Discord</div> <div style="height:100%;display: flex; flex-direction: column;justify-content: space-between;">
</a> <div style="padding-top: 0.7em;font-size: 0.3em; font-weight: 200;vertical-align:center;height:50px;">
</li> <div style="margin-right: 10px; margin-left: 20px; height: 100%; display: flex; align-items: center; justify-content: flex-end;gap: 50px;">
<li style=" margin-right: 50px; height: 100%; display: flex; align-items: center;"> <div style="padding-top: 0.7em;font-size: 0.3em; font-weight: 200;vertical-align:center;">
<a href="https://github.com/leaningtech/webvm" target="_blank" style="text-decoration: none" > <a href="https://leaningtech.com" style="text-decoration: none; height: 100%;" target="_blank">
<div style="color: white; font-family: montserrat; font-weight: 700; font-size: large;">Github</div> <div style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
</a> <span>Made with &#10084;&#65039; by </span>
</li> <img src="assets/leaningtech.png" height="40px" style="margin-left: 5px;">
<li style=" margin-right: 50px; height: 100%; display: flex; align-items: center;"> </div>
<a id="loginLink" style="text-decoration: none; cursor:not-allowed;"> </a>
<div id="networkStatus" style="color: grey; font-family: montserrat; font-weight: 700; font-size: large;">Tailscale Login</div> </div>
</a> </div>
</li> </div>
<div style="padding-top: 0.7em;font-size: 0.3em; font-weight: 200;vertical-align:center;height:50px;">
<div style="margin-right: 10px; margin-left: 20px; height: 100%; display: flex; align-items: center; justify-content: flex-end;gap: 50px;">
<a id="loginLink" style="text-decoration: none; height: 100%; cursor:not-allowed;">
<div style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
<span id="networkStatus">Connect via Tailscale </span>
<img src="assets/tailscale.svg" height="40px" style="margin-left: 7px;">
</div>
</a>
<a href="https://discord.com/invite/3nAYPEGD" style="text-decoration: none; height: 100%;" target="_blank">
<div style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
<span>Discord chat </span>
<img src="assets/discord-mark-blue.svg" height="40px" style="margin-left: 7px;">
</div>
</a>
<a href="https://www.leaningtech.com/pages/cheerpj.html" style="text-decoration: none; height: 100%;" target="_blank">
<div style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
<span>GitHub issues </span>
<img src="assets/github-mark-white.svg" height="40px" style="margin-left: 5px;">
</div>
</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
</header> </div>
<div>
</div>
<div style="flex-grow:0; flex-shrink: 0; height:1px; width: 100%; background-color: white;"> <div style="flex-grow:0; flex-shrink: 0; height:1px; width: 100%; background-color: white;">
</div> </div>
<main style="display: flex; flex-direction: row; justify-content: space-between; margin:0; height:100%;"> <main style="display: flex; flex-direction: row; justify-content: space-between; margin:0; height:100%;">
@ -269,7 +294,6 @@
} }
function initialMessage() function initialMessage()
{ {
printOnTerm.printMessage(printOnTerm.getAsciiTitle());
printOnTerm.printMessage([""]); printOnTerm.printMessage([""]);
printOnTerm.printMessage(printOnTerm.getAsciiText()); printOnTerm.printMessage(printOnTerm.getAsciiText());
term.registerLinkMatcher(/https:\/\/leaningtech.com\/webvm-virtual-machine-with-networking-via-tailscale/, function(mouseEvent, matchedString) { term.registerLinkMatcher(/https:\/\/leaningtech.com\/webvm-virtual-machine-with-networking-via-tailscale/, function(mouseEvent, matchedString) {